新增 航次详情-地图显示航次图片并查看

src/views/voyage/voyageDetail.vue

@@ -768,23 +768,31 @@ export default {
       });
       map.value.addControl(toolBar);
       map.value.addControl(hawkEye);
-      if (coordinates.value.length) {
-        let { longitude, latitude } =
-          coordinates.value[coordinates.value.length - 1];
-        setShipMarker(longitude, latitude);
+      if (medias.value.length) {
+        for (let i of medias.value) {
+          setShipMarker(i);
+        }
       }
     }
 
-    function setShipMarker(longitude = 121.524761, latitude = 31.228721) {
+    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}'/>
+        <img style='display:block;width:26px;margin:6px auto'  src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png'/>
+      </div>`;
+
       map.value.setCenter([longitude, latitude]);
       var marker = new AMap.Marker({
+        content,
         position: new AMap.LngLat(longitude, latitude),
-        offset: new AMap.Pixel(-20, -20),
-        size: new AMap.Size(80, 80),
-        icon: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png", // 添加 Icon 图标 URL
+        offset: new AMap.Pixel(-55, -165),
         title: "北京",
       });
       map.value.add(marker);
+      document.getElementById(`img${id}`).addEventListener("click", () => {
+        openMediaModal(viewUrl, 1, "航次图片", item);
+      });
     }
 
     let disabledStatus = ref(true);
@@ -865,7 +873,8 @@ export default {
     let modalType = ref(1);
     let modalTitle = ref("");
     let modalPreview = ref([]);
-    function openMediaModal(url, type, title) {
+    function openMediaModal(url, type, title, item = {}) {
+      console.log(item);
       modalPreview.value = [url];
       modalTitle.value = title;
       modalType.value = type;