fix:修复车船位置更新问题

src/views/scenic/components/big-map.vue

@@ -151,17 +151,15 @@
       if (map.value && modelValue.value) {
         // 109.645729,31.041203
         if (carOverlays.value.length > 0) {
-          // 更新车辆marker位置
-          let flag = false
           for (let i = 0; i < carOverlays.value.length; i++) {
-            if (flag) break
             for (let j = 0; j < props.carList.length; j++) {
-              if (carOverlays.value[i].sim == props.carList[j].sim) {
+              let carOverlay = carOverlays.value[i]
+              let car = props.carList[j]
+              if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
                 carOverlays.value[i].setPosition({
-                  lng: props.carList[j].lng,
-                  lat: props.carList[j].lat
+                  lng: car.lng,
+                  lat: car.lat
                 })
-                flag = true
                 continue
               }
             }
@@ -173,15 +171,12 @@
               infoBox.value &&
               props.carList[i].sim == currentMarker.value.sim
             ) {
+              console.log('变化了')
+              let { lng, lat } = props.carList[i]
               infoBox.value.setContent(setHtml(props.carList[i]))
-              infoBox.value.setPosition({
-                lng: props.carList[i].lng,
-                lat: props.carList[i].lat
-              })
-              currentMarker.value.setPosition({
-                lng: props.carList[i].lng,
-                lat: props.carList[i].lat
-              })
+              infoBox.value.setPosition(new BMapGL.Point(lng, lat))
+              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
+              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
               break
             }
           }
@@ -199,7 +194,9 @@
               }
               marker.value.addEventListener('click', (e) => {
                 e.sim = e.target.sim
-                currentMarker.value = e
+                currentMarker.value = carOverlays.value.find(
+                  (item) => item && item.sim == e.target.sim
+                )
                 let obj = props.carList.find((item) => item.sim == e.target.sim)
                 setInfoBox(e.latLng, obj)
               })
@@ -208,18 +205,18 @@
             }
           })
         }
+
         if (shipOverlays.value.length > 0) {
           // 更新船只marker位置
-          let flag = false
           for (let i = 0; i < shipOverlays.value.length; i++) {
-            if (flag) break
             for (let j = 0; j < props.shipList.length; j++) {
-              if (shipOverlays.value[i].sim == props.shipList[j].sim) {
+              let shipOverlay = shipOverlays.value[i]
+              let ship = props.shipList[j]
+              if (shipOverlay && ship && shipOverlay.sim == ship.sim) {
                 shipOverlays.value[i].setPosition({
-                  lng: props.shipList[j].lng,
-                  lat: props.shipList[j].lat
+                  lng: ship.lng,
+                  lat: ship.lat
                 })
-                flag = true
                 continue
               }
             }
@@ -231,11 +228,11 @@
               infoBox.value &&
               props.shipList[i].sim == currentMarker.value.sim
             ) {
+              let { lng, lat } = props.carList[i]
               infoBox.value.setContent(setHtml(props.shipList[i]))
-              infoBox.value.setPosition({
-                lng: props.shipList[i].lng,
-                lat: props.shipList[i].lat
-              })
+              infoBox.value.setPosition(new BMapGL.Point(lng, lat))
+              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
+              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
               break
             }
           }
@@ -252,7 +249,9 @@
                 addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
               }
               marker.value.addEventListener('click', (e) => {
-                currentMarker.value = e
+                currentMarker.value = carOverlays.value.find(
+                  (item) => item && item.sim == e.target.sim
+                )
                 let obj = props.shipList.find((item) => item.sim == e.target.sim)
                 setInfoBox(e.latLng, obj)
               })
@@ -275,34 +274,40 @@
   }
 
   const setHtml = (data) => {
-    data.gpsTime = timestampToYMD(data?.gpsTime)
-    //  <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
-    //  <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
-    let html = `<div class='marker-box'>
-                    <p class='marker-title'> ${data?.licenseNumber} </p>
-                    <div class='marker-header'>
-                        <span class='marker-sim'> ${data?.imei} </span>
-                        <div class='marker-tag'> <div></div> ${data?.status}  （${data?.statusTimeDesc}）</div>
-                      </div>
-                    <div class='marker-line'> </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
-                      <div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
-                    </div>
-                  </div>`
-    return html
+    return `<div class='marker-box'>
+                <p class='marker-title'> ${data?.licenseNumber} </p>
+                <div class='marker-header'>
+                <span class='marker-sim'> ${data?.imei} </span>
+                <div class='marker-tag'> 
+                  <div></div> 
+                  ${data?.status}  （${data?.statusTimeDesc}）
+                </div>
+                </div>
+                <div class='marker-line'> </div>
+                <div class='marker-row'>
+                <div class='marker-col'>
+                  <img src='${icon13}' />
+                  <p> ${data?.contactUser} </p> </div>
+                  <div class='marker-col'> 
+                  <img src='${icon14}' /> <p> ${data?.contactTel} </p> 
+                  </div>
+                </div>
+                <div class='marker-row'>
+                <div class='marker-col'> 
+                  <img src='${icon15}' /> 
+                  <p> ${timestampToYMD(data?.gpsTime)} </p> </div>
+                </div>
+                <div class='marker-row'>
+                <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
+                </div>
+                <div class='marker-row'>
+                <div class='marker-col'> 
+                  <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
+                </div>
+                <div class='marker-row'>
+                <div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
+                </div>
+            </div>`
   }
 
   const setInfoBox = (e, data) => {
@@ -315,17 +320,21 @@
         align: INFOBOX_AT_TOP,
         offset: new BMapGL.Size(0, 20)
       })
+      infoBox.value.addEventListener('close', () => {
+        currentMarker.value = null
+      })
     } else {
       if (lastInfoBox.value) lastInfoBox.value?.close()
       infoBox.value.setContent(setHtml(data))
       lastInfoBox.value = infoBox.value
     }
     infoBox.value.open(e)
+    map.value.centerAndZoom(e, 15)
   }
 
   const handleItem = (e, index) => {
     current.value = index
-    currentMarker.value = carOverlays.value.find((item) => item.sim == e.sim)
+    currentMarker.value = carOverlays.value.find((item) => item && item.sim == e.sim)
     setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
   }
 
@@ -339,6 +348,7 @@
     carOverlays.value = []
     shipOverlays.value = []
     map.value = null
+    current.value = ''
     infoBox.value = null
     lastInfoBox.value = null
     modelValue.value = false
@@ -366,7 +376,6 @@
 
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
-		// console.log(data,'99999999999999999999999999999999999999')
       scenicSpotId.value = data.scenicSpotId
       lat.value = data.lat
       lng.value = data.lng