feat：完善功能

src/views/scenic/components/box-2.vue

@@ -283,7 +283,7 @@
                 <div class="label">运营船只</div>
                 <div class="value flex">
                   <countup :end-val="scenicStore.carShipData.ship.count?.drivingCount" />
-                  <span class="suffix">辆</span>
+                  <span class="suffix">只</span>
                 </div>
               </div>
               <div class="car-item">
@@ -303,7 +303,11 @@
       </div>
     </div>
   </div>
-  <BigCarShipMap v-model="show" />
+  <big-car-ship-map
+    v-model="show"
+    :carList="scenicStore.carShipData.car.list"
+    :shipList="scenicStore.carShipData.ship.list"
+  />
 </template>
 
 <script setup>
@@ -319,6 +323,8 @@
   import { useMap } from '@/hooks/map'
   import { useScenicStore } from '@/stores/scenic'
 
+  import PubSub from 'pubsub-js'
+
   const scenicStore = useScenicStore()
   const { initMap, addMarker } = useMap()
 
@@ -372,17 +378,22 @@
   })
 
   let show = ref(false)
+  let scenicChange = null
 
   watch(
     () => scenicStore.carShipData,
     (val) => {
-      if (val.car.list.length > 0) {
+      if (val.car.list.length) {
         setTimeout(() => {
           val.car.list.map((item) => {
-            addMarker(carIcon, [109.551419, 31.050001], [36, 50])
+            addMarker(carIcon, [item.lng, item.lat], [36, 50])
           })
+        }, 1000)
+      }
+      if (val.ship.list.length) {
+        setTimeout(() => {
           val.ship.list.map((item) => {
-            addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
+            addMarker(shipIcon, [item.lng, item.lat], [36, 50])
           })
         }, 1000)
       }
@@ -391,7 +402,12 @@
   )
 
   onMounted(() => {
-    initMap('car-ship', 109.552461, 31.049607, 15)
+    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+      initMap('car-ship', data.lng, data.lat, 15)
+    })
+  })
+  onUnmounted(() => {
+    PubSub.unsubscribe(scenicChange)
   })
 </script>