更新 船舶轨迹变更为船舶标记

src/views/shipManage/shipDetail.vue

@@ -122,33 +122,76 @@ function initMap() {
   });
   map.value.addControl(toolBar);
   map.value.addControl(hawkEye);
-
+  let markers = [];
   if (shipCoors.value.length) {
-    let path = [];
     for (let i of shipCoors.value) {
-      path.push(new AMap.LngLat(Number(i.longitude), Number(i.latitude)));
+      let content = `<div style='width:160px'>
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-green.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),
+      });
+      marker.setLabel({
+        direction: "top",
+        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+        content: `${i.createTime.substring(0, 10)}`, //设置文本标注内容
+        style: "",
+      });
+      markers.push(marker);
     }
-    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)));
+      let content = `<div style='width:160px'>
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-red.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),
+      });
+      marker.setLabel({
+        direction: "top",
+        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+        content: `${i.createTime.substring(0, 10)}`, //设置文本标注内容
+        style: "",
+      });
+      markers.push(marker);
     }
-    mediaCoorsPolyline.value = new AMap.Polyline({
-      path: path,
-      borderWeight: 2, // 线条宽度，默认为 1
-      strokeColor: "red", // 线条颜色
-      lineJoin: "round", // 折线拐点连接处样式
-    });
   }
-  map.value.add([shipCoorsPolyline.value, mediaCoorsPolyline.value]);
-  map.value.setFitView();
+  let overlayGroups = new AMap.OverlayGroup(markers);
+  map.value.add(overlayGroups);
+  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
+  // 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);