feat：完善功能

index.html

@@ -8,6 +8,7 @@
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
     />
     <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=MZ9Zd9vKGesV5wxV1EhvjOoGIjHc09Yj"></script>
+    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js"></script>
     <title>奉节旅游调度</title>
   </head>
 

src/hooks/map.js

@@ -3,6 +3,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)
@@ -27,11 +28,36 @@ export function useMap() {
     // 创建标注对象并添加到地图
     marker.value = new BMapGL.Marker(point, { icon: iconPath })
     map.value.addOverlay(marker.value)
+    // marker.value.addEventListener('click', (e) => {
+    //   console.log(e, '===')
+    //   if (!infoBox.value) {
+    //     setInfoBox(e.latLng)
+    //   } else {
+    //     if (lastInfoBox.value) lastInfoBox.value?.close()
+    //     infoBox.value.open(e.latLng)
+    //     lastInfoBox.value = infoBox.value
+    //   }
+    //   // const content = `
+    //   //   <div style="padding: 10px;">
+    //   //     <h4>标题</h4>
+    //   //     <p>这里是详细信息</p>
+    //   //   </div>
+    //   // `
+    //   // var infoWindow = new BMapGL.InfoWindow(content) // 创建信息窗口对象
+    //   // console.log(map.value.getCenter())
+    //   // map.value.openInfoWindow(infoWindow, e.latLng) // 打开信息窗口
+    //   // const infoWindow = new BMapGL.InfoWindow('这里是一些信息') // 创建信息窗口对象
+    //   // marker.value.openInfoWindow(infoWindow) // 打开信息窗口
+    // })
   }
+
   // 清除覆盖物
   const clearOverlays = () => {
     map.value.clearOverlays()
   }
-
-  return { map, marker, initMap, addMarker, clearOverlays }
+  // 清除某一个覆盖物
+  const removeOverlay = (i) => {
+    map.value.removeOverlay(i)
+  }
+  return { map, marker, initMap, addMarker, clearOverlays, removeOverlay }
 }

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

@@ -10,10 +10,19 @@
 <script setup>
   import carIcon from '@/assets/images/car.png'
   import shipIcon from '@/assets/images/ship.png'
+  import icon13 from '@/assets/images/icon-13.png'
+  import icon14 from '@/assets/images/icon-14.png'
+  import icon15 from '@/assets/images/icon-15.png'
+  import icon16 from '@/assets/images/icon-16.png'
+  import icon17 from '@/assets/images/icon-17.png'
+  import icon18 from '@/assets/images/icon-18.png'
+  import icon19 from '@/assets/images/icon-19.png'
+  import icon20 from '@/assets/images/icon-20.png'
+
   import { useMap } from '@/hooks/map'
 
   let modelValue = defineModel()
-  const { map, initMap, addMarker, clearOverlays } = useMap()
+  const { map, marker, initMap, addMarker, removeOverlay } = useMap()
 
   let props = defineProps({
     carList: {
@@ -29,7 +38,11 @@
   let lat = ref('')
   let lng = ref('')
   let scenicChange = null
-
+  let carOverlays = ref([])
+  let shipOverlays = ref([])
+  let lastInfoBox = ref()
+  let infoBox = ref()
+  let currentMarker = ref()
   watch(
     () => modelValue.value,
     (val) => {
@@ -45,20 +58,106 @@
     () => [map.value, props.carList, props.shipList],
     (val) => {
       if (val[0]) {
-        setTimeout(() => {
-          clearOverlays()
-          val[1].map((item) => {
-            if (item.lng && item.lat) addMarker(carIcon, [item.lng, item.lat], [36, 50])
+        // 109.65274,31.045241
+        if (carOverlays.value.length > 0) {
+          let flag = false
+          for (let i = 0; i < carOverlays.value.length; i++) {
+            if (flag) break
+            for (let j = 0; j < val[1].length; j++) {
+              if (carOverlays.value[i].sim == val[1][j].sim) {
+                carOverlays.value[i].setPosition({
+                  lng: val[1][j].lng,
+                  lat: val[1][j].lat
+                })
+                flag = true
+                break
+              }
+            }
+          }
+          for (let i = 0; i < val[1].length; i++) {
+            if (
+              currentMarker.value &&
+              infoBox.value &&
+              val[1][i].sim == currentMarker.value.target.sim
+            ) {
+              infoBox.value.setPosition({
+                lng: val[1][i].lng,
+                lat: val[1][i].lat
+              })
+              infoBox.value.setContent(setHtml('么么哒'))
+              break
+            }
+          }
+        } else {
+          val[1].map((item, i) => {
+            if (item.lng && item.lat) {
+              addMarker(carIcon, [item.lng, item.lat], [36, 50])
+              marker.value.addEventListener('click', (e) => {
+                currentMarker.value = e
+                if (!infoBox.value) {
+                  setInfoBox(e.latLng)
+                } else {
+                  if (lastInfoBox.value) lastInfoBox.value?.close()
+                  infoBox.value.open(e.latLng)
+                  infoBox.value.setContent(setHtml('爱你哟'))
+                  lastInfoBox.value = infoBox.value
+                }
+              })
+              marker.value.sim = item.sim
+              carOverlays.value[i] = marker.value
+            }
           })
-          val[2].map((item) => {
-            if (item.lng && item.lat) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
-          })
-        }, 1000)
+        }
+
+        val[2].map((item) => {
+          if (item.lng && item.lat) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+        })
       }
     },
     { immediate: true }
   )
 
+  const setHtml = (title) => {
+    let html = `<div class='marker-box'>
+                  <p class='marker-title'> ${title} </p>
+                  <div class='marker-header'> 
+                      <span class='marker-sim'> 863014542181060 </span>
+                      <div class='marker-tag'> <div></div> 静止(1分9秒)</div>
+                    </div>
+                  <div class='marker-line'> </div>
+                  <div class='marker-row'>
+                    <div class='marker-col'> <img src='${icon13}' /> <p> 王明 </p> </div>
+                    <div class='marker-col'> <img src='${icon14}' /> <p> 18723232323 </p> </div>
+                  </div>
+                  <div class='marker-row'>
+                    <div class='marker-col'> <img src='${icon15}' /> <p> 王明 </p> </div>
+                    <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
+                  </div>
+                  <div class='marker-row'>
+                    <div class='marker-col'> <img src='${icon17}' /> <p> 222KM </p> </div>
+                    <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
+                  </div>
+                  <div class='marker-row'>
+                    <div class='marker-col'> <img src='${icon19}' /> <p> 31,04736,109.584536 </p> </div>
+                  </div>
+                  <div class='marker-row'>
+                    <div class='marker-col'> <img src='${icon20}' /> <p> 重庆市奉节县(重庆市奉节县白帝城.瞿塘峡景区内.白帝城东南218米） </p> </div>
+                  </div>
+                </div>`
+    return html
+  }
+  const setInfoBox = (e) => {
+    infoBox.value = new BMapGLLib.InfoBox(map.value, setHtml('场（厂）内渝A·33087'), {
+      boxStyle: {},
+      closeIconMargin: '1px 1px 0 0',
+      closeIconUrl: '',
+      enableAutoPan: true,
+      align: INFOBOX_AT_TOP,
+      offset: new BMapGL.Size(0, 20)
+    })
+    infoBox.value.open(e)
+  }
+
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
       lat.value = data.lat
@@ -70,6 +169,76 @@
   })
 </script>
 
+<style lang="scss">
+  .marker {
+    &-box {
+      width: 316px;
+
+      background: linear-gradient(180deg, #0a4190 0%, #0e51b1 100%);
+      border: 1px solid #0096ff;
+    }
+    &-title {
+      width: 100%;
+      height: vh(36);
+      padding-left: vw(16);
+      font-weight: 600;
+      font-size: vw(16);
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      background-image: url('@/assets/images/marker-title.png');
+      background-size: 100% 100%;
+    }
+    &-header {
+      padding: vh(12) vw(14);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &-sim {
+      font-weight: 600;
+      font-size: vw(16);
+      color: #ffffff;
+    }
+    &-tag {
+      padding: vh(5) vw(8);
+      font-weight: 400;
+      font-size: vw(13);
+      color: #0096ff;
+      background: #0b4599;
+      border-radius: vw(23);
+      border: vw(1) solid #0096ff;
+    }
+    &-line {
+      width: 100%;
+      height: vw(1);
+      background-color: #134fa4;
+    }
+    &-row {
+      padding: vh(10) vw(16);
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #134fa4;
+    }
+    &-col {
+      flex: 1;
+      display: flex;
+      align-items: flex-start;
+      > img {
+        width: vw(32);
+        height: vw(32);
+        margin-right: vw(10);
+      }
+      > p {
+        flex: 1;
+        font-weight: 400;
+        font-size: vw(24);
+        color: #ffffff;
+        line-height: vh(20);
+      }
+    }
+  }
+</style>
 <style scoped lang="scss">
   :deep(.BMap_cpyCtrl) {
     display: none;

src/views/scenic/index.vue

@@ -37,7 +37,6 @@
     () => dataRes.value,
     (val) => {
       if (val) {
-        console.log(val, '景区接受消息')
         switch (val.type) {
           case 'wordkOrderlist':
             scenicStore.setWordkOrderList(val.data)
@@ -78,7 +77,6 @@
   const sendCarShip = (e) => {
     timer = setInterval(() => {
       if (isConnected.value) {
-        console.log('定时发送车船消息22')
         sendMessage(
           JSON.stringify({
             action: 'start',