fix：修复车船gps运动错误的问题

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 }
 }

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)
-      })
-    })
+    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)
+  // })
 </script>
 
 <style lang="scss" scoped>