更新 地图图片组渲染逻辑;新增mapId

src/views/voyage/voyageDetail.vue

@@ -75,7 +75,7 @@
         ></el-input>
       </div>
     </div>
-    <div id="map-container" class="map-container"></div>
+    <div :id="mapId" class="map-container"></div>
     <div class="line" style="margin-top: 30px">
       <div class="info-line">
         <div class="info-line-title">开始时间</div>
@@ -756,8 +756,9 @@ export default {
       updateForm.value = {};
       currentUpdateIndex.value = -1;
     }
+    let mapId = ref(`map${route.query.id}`);
     function initMap() {
-      map.value = new AMap.Map("map-container", {
+      map.value = new AMap.Map(mapId.value, {
         zoom: 16, //级别
         center: [121.524761, 31.228721], //中心点坐标
         mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
@@ -773,31 +774,31 @@ export default {
       });
       map.value.addControl(toolBar);
       map.value.addControl(hawkEye);
-      if (medias.value.length) {
-        for (let i of medias.value) {
-          setShipMarker(i);
-        }
-      }
-      map.value.setFitView();
-    }
-
-    function setShipMarker(item) {
-      let { longitude, latitude, viewUrl, id } = item;
-      let content = `<div style='width:160px'>
-        <img id='img${id}' style='width:160px;height:160px;object-fit:contain;' src='${viewUrl}'/>
+      let markers = [];
+      for (let i of medias.value) {
+        let content = `<div style='width:160px'>
+        <img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>
         <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
       </div>`;
 
-      map.value.setCenter([longitude, latitude]);
-      var marker = new AMap.Marker({
-        content,
-        position: new AMap.LngLat(longitude, latitude),
-        offset: new AMap.Pixel(-75, -195),
-      });
-      map.value.add(marker);
-      document.getElementById(`img${id}`).addEventListener("click", () => {
-        openMediaModal(viewUrl, 1, "航次图片", item);
-      });
+        let marker = new AMap.Marker({
+          content,
+          position: new AMap.LngLat(i.longitude, i.latitude),
+          offset: new AMap.Pixel(-75, -195),
+        });
+        marker.on("click", () => {
+          openMediaModal(i.viewUrl, 1, "航次图片");
+        });
+        markers.push(marker);
+      }
+
+      let overlayGroups = new AMap.OverlayGroup(markers);
+      map.value.add(overlayGroups);
+
+      let t = setTimeout(() => {
+        map.value.setFitView();
+        clearTimeout(t);
+      }, 1000);
     }
 
     let disabledStatus = ref(true);
@@ -879,7 +880,6 @@ export default {
     let modalTitle = ref("");
     let modalPreview = ref([]);
     function openMediaModal(url, type, title, item = {}) {
-      console.log(item);
       modalPreview.value = [url];
       modalTitle.value = title;
       modalType.value = type;
@@ -1124,6 +1124,7 @@ export default {
       poundParams,
       calExpectedArrivalTime,
       cancelVoyage,
+      mapId,
     };
   },
 };