ToDo 航次详情地图组件;地图组件交互

index.html

@@ -8,7 +8,7 @@
       charset="utf-8"
       src="https://map.qq.com/api/gljs?v=1.exp&key=Y2BBZ-IHRKU-V42VO-BFQEE-K7252-ZBBSF"
     ></script> -->
-    <script src="https://webapi.amap.com/maps?v=2.0&key=0b84075e96d01623f704867a601139bb&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar"></script>
+    <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=0b84075e96d01623f704867a601139bb&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar"></script> -->
     <title>Huihenduo App</title>
     <style>
       * {

src/components/AMapContainer.vue

@@ -4,6 +4,9 @@
 <script setup>
 import { onMounted, onUnmounted, ref } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
+import router from "../router";
+import { useRoute } from "vue-router";
+const route = useRoute();
 const props = defineProps({
   longitude: {
     type: Number,
@@ -17,6 +20,14 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  showLabel: {
+    type: Boolean,
+    default: false,
+  },
+  handleAble: {
+    type: Boolean,
+    default: false,
+  },
   loadPorts: {
     type: Array,
     default: [],
@@ -29,6 +40,22 @@ const props = defineProps({
     type: String,
     default: "container",
   },
+  zoomEnable: {
+    type: Boolean,
+    default: true,
+  },
+  dragEnable: {
+    type: Boolean,
+    default: true,
+  },
+  ToolBar: {
+    type: Boolean,
+    default: true,
+  },
+  HawkEye: {
+    type: Boolean,
+    default: true,
+  },
 });
 const mapId = ref(props.mapId);
 const map = ref({});
@@ -42,48 +69,37 @@ function initMap() {
         zoom: 12, // 初始化地图级别
         center: [props.longitude, props.latitude], // 初始化地图中心点位置
         mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
-        zoomEnable: true,
-        dragEnable: true,
+        zoomEnable: props.zoomEnable,
+        dragEnable: props.dragEnable,
       });
-      let markers = [];
+      if (props.ToolBar || props.HawkEye) {
+        map.value.plugin(["AMap.ToolBar", "AMap.HawkEye"], function () {
+          if (props.ToolBar) {
+            let ToolBar = new AMap.ToolBar({
+              position: {
+                top: "40px",
+                right: "40px",
+              },
+            });
+            map.value.addControl(ToolBar);
+          }
 
-      for (let i of props.ships) {
-        let marker = generateMarker({
-          longitude: i.longitude,
-          latitude: i.latitude,
-          label: i.shipName,
-        });
-        markers.push(marker);
-      }
-      for (let i of props.loadPorts) {
-        let marker = generateMarker({
-          longitude: i.longitude,
-          latitude: i.latitude,
-          iconSrc:
-            "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-green.png",
-          iconWidth: 30,
-          iconHeight: 30,
-          offsetY: -30,
-          label: "装货港",
-        });
-        markers.push(marker);
-      }
-      for (let i of props.dischargePorts) {
-        let marker = generateMarker({
-          longitude: i.longitude,
-          latitude: i.latitude,
-          iconSrc:
-            "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-red.png",
-          iconWidth: 30,
-          iconHeight: 30,
-          offsetY: -30,
-          label: "卸货港",
+          if (props.HawkEye) {
+            let HawkEye = new AMap.HawkEye({
+              opened: false,
+            });
+
+            map.value.addControl(HawkEye);
+          }
         });
-        markers.push(marker);
       }
-      let overlayGroups = new AMap.OverlayGroup(markers);
-      map.value.add(overlayGroups);
-      map.value.setFitView(markers, true, [150, 50, 100, 100], 9);
+      let markers = [
+        ...generateMarkers(props.ships, "ships"),
+        ...generateMarkers(props.loadPorts, "loadPorts"),
+        ...generateMarkers(props.dischargePorts, "dischargePorts"),
+      ];
+      drawMarkers(markers);
+      setFitView(markers);
     })
     .catch((e) => {
       console.log(e);
@@ -91,14 +107,16 @@ function initMap() {
 }
 
 function generateMarker({
+  id = 0,
   longitude = 120.498409,
   latitude = 32.039665,
   iconSrc = "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png",
   offsetX = -80,
-  offsetY = -20,
+  offsetY = -25,
   label = "",
-  iconWidth = 20,
-  iconHeight = 20,
+  iconWidth = 30,
+  iconHeight = 30,
+  handleType = "",
 }) {
   let marker = new AMap.Marker({
     content: `<div style='width:160px'>
@@ -116,14 +134,96 @@ function generateMarker({
       style: "",
     });
   }
+  if (handleType === "route") {
+    marker.on("click", () => {
+      goTo("/voyage/voyageDetail", {
+        id,
+      });
+    });
+  }
 
   return marker;
 }
+//ship-orange-icon
+function generateMarkers(points, type) {
+  let markers = [];
+  for (let i of points) {
+    let config = {
+      longitude: i.longitude,
+      latitude: i.latitude,
+    };
+    switch (type) {
+      case "ships": {
+        config.label = i.shipName;
+        config.id = i.voyageId;
+        config.handleType = "route";
+        if (route.path === "/index") {
+          config.iconSrc =
+            "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-icon.png";
+        }
+        break;
+      }
+      case "loadPorts": {
+        config.iconSrc =
+          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-green.png";
+        config.label = "装货港";
+        break;
+      }
+      case "dischargePorts": {
+        config.iconSrc =
+          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-red.png";
+        config.label = "卸货港";
+        break;
+      }
+    }
+    markers.push(generateMarker(config));
+  }
+  return markers;
+}
+
+function drawMarkers(markers) {
+  let overlayGroups = new AMap.OverlayGroup(markers);
+  map.value.add(overlayGroups);
+}
+
+function setFitView(markers = [], zoom = 9) {
+  map.value.setFitView(markers, true, [150, 50, 100, 100], zoom);
+}
+
+function clearMap() {
+  map.value.clearMap();
+}
+
+function goTo(path = "/voyage/voyageDetail", query = {}) {
+  router.push({
+    path,
+    query,
+  });
+}
+
+let currentUrl = ref("");
+let mediaModal = ref(false);
+let modalType = ref(1);
+let modalTitle = ref("");
+let modalPreview = ref([]);
+function openMediaModal(url, type, title, item = {}) {
+  modalPreview.value = [url];
+  modalTitle.value = title;
+  modalType.value = type;
+  currentUrl.value = url;
+  mediaModal.value = true;
+}
 
 onMounted(() => {
   initMap();
 });
 
+defineExpose({
+  clearMap,
+  drawMarkers,
+  initMap,
+});
+
 onUnmounted(() => {
   map.value.destroy();
 });

src/views/index/Index.vue

@@ -2,7 +2,15 @@
   <div v-loading="isLoading" style="height: 100%">
     <div class="df main">
       <div class="left">
-        <div id="map-container" class="map-container"></div>
+        <!-- <div id="map-container" class="map-container"></div> -->
+        <AMapContainer
+          v-if="indexData.mapPoints.length"
+          ref="mapRef"
+          class="map-container"
+          :ships="indexData.mapPoints"
+          :showLabel="true"
+          :handleAble="true"
+        ></AMapContainer>
         <div class="df aic tabs">
           <div
             @click="changeVoyageType(0)"
@@ -287,73 +295,8 @@ let map = ref({});
 let cargoOwnerId = localStorage.userId;
 let echarts = inject("ec");
 
-function initMap() {
-  map.value = new AMap.Map("map-container", {
-    zoom: 9, //级别
-    zooms: [4, 9],
-    center: [120.563757, 31.891174], //中心点坐标
-    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
-    zoomEnable: true,
-    dragEnable: true,
-  });
-  let toolBar = new AMap.ToolBar({
-    position: {
-      top: "40px",
-      right: "40px",
-    },
-  });
-  let hawkEye = new AMap.HawkEye({
-    opened: false,
-  });
-  map.value.addControl(toolBar);
-  map.value.addControl(hawkEye);
-  drawMarkers();
-}
-
-function drawMarkers() {
-  let markers = [];
-  for (let i of indexData.value.mapPoints) {
-    if (i.latitude && i.longitude) {
-      let content = `<div style='width:160px'>
-          <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
-        </div>`;
-
-      let marker = new AMap.Marker({
-        content,
-        position: new AMap.LngLat(i.longitude, i.latitude),
-        offset: new AMap.Pixel(-80, -20),
-      });
-      let infoWindowContent = `<div class='window-title pointer' style='font-size:12px'>${i.shipName}</div>
-        <div style='font-size:12px;margin-top:5px'>查看详情</div>
-        `;
-      let infoWindow = new AMap.InfoWindow({
-        position: new AMap.LngLat(i.longitude, i.latitude),
-        offset: new AMap.Pixel(0, -10),
-        content: infoWindowContent,
-      });
-
-      marker.on("mouseover", function () {
-        infoWindow.open(map.value);
-      });
-      marker.setLabel({
-        direction: "top",
-        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-        content: `${i.shipName}`, //设置文本标注内容
-        style: "",
-      });
-
-      marker.on("click", () => {
-        goToVoyageDetail(i.voyageId);
-      });
-
-      markers.push(marker);
-    }
-  }
-  let overlayGroups = new AMap.OverlayGroup(markers);
-  map.value.add(overlayGroups);
-  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
-}
 let status = ref(3);
+const mapRef = ref(null);
 function changeVoyageType(s) {
   status.value = s;
   postData.value = {
@@ -367,15 +310,6 @@ function changeVoyageType(s) {
   getIndexData();
 }
 
-function goToVoyageDetail(id) {
-  router.push({
-    path: "/voyage/voyageDetail",
-    query: {
-      id,
-    },
-  });
-}
-
 let postData = ref({
   status: 0,
   loadPortId: "",
@@ -403,12 +337,10 @@ async function getIndexData(type) {
     if (res.data.status == 0) {
       indexData.value = res.data.result;
       if (type == "init") {
-        initMap();
         drawPie("init");
       } else {
-        map.value.clearMap();
-        drawMarkers();
         drawPie();
+        mapRef.value.initMap();
       }
     } else {
       indexData.value = {
@@ -419,12 +351,10 @@ async function getIndexData(type) {
         unfinshDiscTons: 0,
       };
       if (type == "init") {
-        initMap();
         drawPie("init");
       } else {
-        map.value.clearMap();
-        drawMarkers();
         drawPie();
+        mapRef.value.initMap();
       }
     }
   } catch (error) {

src/views/voyage/voyageDetail.vue

@@ -96,7 +96,8 @@
         ></el-input>
       </div>
     </div>
-    <div :id="mapId" class="map-container"></div>
+    <!-- <div :id="mapId" class="map-container"></div> -->
+    <AMapContainer ref="mapRef" class="map-container"></AMapContainer>
     <div class="line" style="margin-top: 30px">
       <div class="info-line">
         <div class="info-line-title">开始时间</div>
@@ -2014,6 +2015,7 @@ let coordinates = ref([]);
 let previewSrcList = ref([]);
 let shipAudits = ref([]);
 let shipownerUploadFiles = ref([]);
+const mapRef = ref(null);
 async function getVoyageDetail(isInit) {
   previewList.value = [];
   policyFileList.value = [];
@@ -2026,13 +2028,13 @@ async function getVoyageDetail(isInit) {
     spinner: "el-icon-loading",
     background: "rgba(0, 0, 0, 0.7)",
   });
-  let res = await api.getVoyageDetail({
-    type: localStorage.userType,
-    voyageId: route.query.id,
-  });
-  // let res = {
-  //   data,
-  // };
+  // let res = await api.getVoyageDetail({
+  //   type: localStorage.userType,
+  //   voyageId: route.query.id,
+  // });
+  let res = {
+    data,
+  };
   loading.close();
   if (res.data.status == 0) {
     ElNotification({
@@ -2271,7 +2273,7 @@ function initMap() {
       content,
       zIndex: 10,
       position: new AMap.LngLat(i.longitude, i.latitude),
-      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
+      offset: new AMap.Pixel(-80, i.audit == 1 ? -185 : -20),
     });
     if (i.audit == 1) {
       marker.on("click", () => {
@@ -2290,7 +2292,7 @@ function initMap() {
       content,
       zIndex: 5,
       position: new AMap.LngLat(i.longitude, i.latitude),
-      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
+      offset: new AMap.Pixel(-80, -20),
     });
     if (i.audit == 1) {
       marker.on("click", () => {