diff --git a/src/hooks/map.js b/src/hooks/map.js index 14d17ec..dec53fe 100644 --- a/src/hooks/map.js +++ b/src/hooks/map.js @@ -2,6 +2,7 @@ import { ref } from 'vue' export function useMap() { let map = ref(null) + let marker = ref(null) // 初始化地图 const initMap = (id, lat, lng, scale = 15, satellite) => { map.value = new BMapGL.Map(id) @@ -24,13 +25,13 @@ export function useMap() { }) var point = new BMapGL.Point(...position) // 创建标注对象并添加到地图 - var marker = new BMapGL.Marker(point, { icon: iconPath }) - map.value.addOverlay(marker) + marker.value = new BMapGL.Marker(point, { icon: iconPath }) + map.value.addOverlay(marker.value) } // 清除覆盖物 const clearOverlays = () => { map.value.clearOverlays() } - return { map, initMap, addMarker, clearOverlays } + return { map, marker, initMap, addMarker, clearOverlays } } diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue index 5406bb8..86063a8 100644 --- a/src/views/home/components/box-2.vue +++ b/src/views/home/components/box-2.vue @@ -141,7 +141,7 @@ let emit = defineEmits(['switch-spot']) - const { map, initMap, addMarker, clearOverlays } = useMap() + const { map, marker, initMap, addMarker, clearOverlays } = useMap() let spotList = ref([]) @@ -164,20 +164,27 @@ } ]) let current = ref(0) + let markers = [] + let timter = null watch( () => [map.value, homeStore.carShipData], () => { if (map.value && homeStore.carShipData) { - clearOverlays() + // clearOverlays() + markers.forEach((item) => { + map.value.removeOverlay(item) // 移除每个标记 + }) homeStore.carShipData?.car?.list.map((item) => { if (item.lng && item.lat) { addMarker(carIcon, [item.lng, item.lat], [36, 50]) + markers.push(marker.value) } }) homeStore.carShipData?.ship?.list.map((item) => { if (item.lng && item.lat) { addMarker(shipIcon, [item.lng, item.lat], [36, 50]) + markers.push(marker.value) } }) } @@ -203,26 +210,29 @@ map.value.setMapStyleV2({ styleId: 'd1e61f575b3ef4e2df71ab6a5690ddab' // 23c9fb8e1c604995f97f0f1cebd7036fF }) - res.data.list.map((item) => { - item.map((i) => { - // 创建折线 - let arr = [] - i.path.map((j) => { - arr.push(new BMapGL.Point(j[0], j[1])) - }) - var polyline = new BMapGL.Polyline(arr, { - strokeColor: '#9AFF02', - strokeWeight: 8, - strokeOpacity: 0.8 - }) - map.value.addOverlay(polyline) - }) - }) - // getBaiduMapCrowded() + map.value.setTrafficOn() + // res.data.list.map((item) => { + // item.map((i) => { + // // 创建折线 + // let arr = [] + // i.path.map((j) => { + // arr.push(new BMapGL.Point(j[0], j[1])) + // }) + // var polyline = new BMapGL.Polyline(arr, { + // strokeColor: '#9AFF02', + // strokeWeight: 8, + // strokeOpacity: 0.8 + // }) + // map.value.addOverlay(polyline) + // }) + // }) + // timter = setInterval(() => { + // getBaiduMapCrowded() + // }, 5000) } const getBaiduMapCrowded = async () => { let res = await getBaiduMapCrowdedApi({ - nodeid: spotList.value[current.value].nodeid + nodeid: 5118 }) let data = res.data if (data) { @@ -302,6 +312,9 @@ onMounted(() => { getSpotList() }) + // onUnmounted(() => { + // if (timer) clearInterval(timer) + // })