新增 船舶详情地图

src/views/shipManage/shipDetail.vue

@@ -8,6 +8,7 @@
       <div>返回船舶列表</div>
     </div>
   </div>
+  <div id="map-container" class="map-container"></div>
   <ShipInfo :shipInfos="shipInfos"></ShipInfo>
   <div class="container-title">船舶图片</div>
   <div v-if="medias.length" class="medias-content df ffw">
@@ -69,6 +70,8 @@ let shipInfos = ref([{}]);
 let medias = ref([]);
 let mediaCoors = ref([]);
 let shipCoors = ref([]);
+let shipCoorsPolyline = ref([]);
+let mediaCoorsPolyline = ref([]);
 async function getShipDetail(shipCode) {
   let { data } = await api.getShipDetail({ shipCode });
   for (const i of data.result.shipCerts) {
@@ -82,6 +85,7 @@ async function getShipDetail(shipCode) {
   mediaCoors.value = data.result.mediaCoors;
   shipCoors.value = data.result.shipCoors;
   shipInfos.value = [data.result];
+  initMap();
 }
 let currentUrl = ref("");
 let mediaModal = ref(false);
@@ -95,6 +99,57 @@ function openMediaModal(url, type, title) {
   currentUrl.value = url;
   mediaModal.value = true;
 }
+
+const map = ref({});
+function initMap() {
+  map.value = new AMap.Map("map-container", {
+    zoom: 9, //级别
+    zooms: [4, 9],
+    center: [120.557894, 31.887504], //中心点坐标
+    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
+    zoomEnable: true,
+    dragEnable: true,
+    scrollWheel: false,
+  });
+  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);
+
+  if (shipCoors.value.length) {
+    let path = [];
+    for (let i of shipCoors.value) {
+      path.push(new AMap.LngLat(Number(i.longitude), Number(i.latitude)));
+    }
+    shipCoorsPolyline.value = new AMap.Polyline({
+      path: path,
+      borderWeight: 2, // 线条宽度，默认为 1
+      strokeColor: "green", // 线条颜色
+      lineJoin: "round", // 折线拐点连接处样式
+    });
+  }
+  if (mediaCoors.value.length) {
+    let path = [];
+    for (let i of mediaCoors.value) {
+      path.push(new AMap.LngLat(Number(i.longitude), Number(i.latitude)));
+    }
+    mediaCoorsPolyline.value = new AMap.Polyline({
+      path: path,
+      borderWeight: 2, // 线条宽度，默认为 1
+      strokeColor: "red", // 线条颜色
+      lineJoin: "round", // 折线拐点连接处样式
+    });
+  }
+  map.value.add([shipCoorsPolyline.value, mediaCoorsPolyline.value]);
+  map.value.setFitView();
+}
 onMounted(() => {
   getShipDetail(route.query.shipCode);
 });
@@ -238,4 +293,10 @@ onMounted(() => {
   color: #006ebc;
   cursor: pointer;
 }
+
+.map-container {
+  width: 98%;
+  max-width: 1200px;
+  height: 500px;
+}
 </style>