✨ feat: 记录打卡点详情

src/components/Map/MapContainer.vue

@@ -15,6 +15,10 @@ let props = defineProps({
     type: Array,
     default: () => ([])
   },
+  log_list: {
+    type: Array,
+    default: () => ([])
+  },
   threeD: {
     type: Boolean,
     default: false
@@ -34,17 +38,17 @@ onMounted(() => {
         viewMode: props.threeD ? '3D' : '2D', //地图模式
         rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
         pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
-        zoom: 17.5, //初始化地图层级
+        zoom: 18, //初始化地图层级
         rotation: -15, //初始地图顺时针旋转的角度
         zooms: [3, 20], //地图显示的缩放级别范围
-        center: props.pathData?.length > 0 ? props.pathData[0] : [106.5799475868821, 29.504864472181577],
+        center: props.pathData?.length > 0 ? props.pathData[Math.floor(props.pathData.length / 2)] : [106.5799475868821, 29.504864472181577],
       })
 
       // 添加折线
       if (props.pathData?.length > 0) {
         let polyline = new AMap.Polyline({
           path: props.pathData,
-          strokeWeight: 2, //线条宽度
+          strokeWeight: 2.5, //线条宽度
           strokeColor: "red", //线条颜色
           lineJoin: "round", //折线拐点连接处样式
         })
@@ -78,6 +82,45 @@ onMounted(() => {
         })
       }
 
+      if (props.log_list?.length > 0) {
+        console.log(props.log_list)
+        props.log_list.forEach((point, index) => {
+          const markerLocation = [Number(point.jingwei[1]), Number(point.jingwei[0])]
+          const marker = new AMap.Marker({
+            position: markerLocation,
+            offset: new AMap.Pixel(-12, -24),
+            icon: "/mark/log.png",
+            title: point.address
+          })
+
+          const distance = AMap.GeometryUtil.distance(markerLocation, [point.longtitude, point.latitude]).toFixed(2)
+
+          marker.setLabel({
+            direction: 'right',
+            offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
+            content: `<div class="pointinfo">
+                <p><b>打卡点${index + 1} ${point.address}</b></p>
+                <p><b>距离：</b>${distance}米</p>
+              </div>`
+          })
+
+          map.add(marker)
+
+          // 打卡点之间的折线
+          let polyline = new AMap.Polyline({
+            strokeStyle: "dashed",
+            path: [
+              [point.longtitude, point.latitude],
+              markerLocation
+            ],
+            strokeWeight: 3, //线条宽度
+            strokeColor: "blue", //线条颜色
+            lineJoin: "round", //折线拐点连接处样式
+          })
+          map.add(polyline)
+        })
+      }
+
       AMap.plugin(['AMap.ControlBar', "AMap.ToolBar", "AMap.Scale"], function () {
         let controlBar = new AMap.ControlBar({ //控制地图旋转插件
           position: {
@@ -91,8 +134,6 @@ onMounted(() => {
         let scale = new AMap.Scale()
         map.addControl(scale)
       })
-
-
     })
     .catch((e) => {
       console.log(e)
@@ -111,6 +152,16 @@ onUnmounted(() => {
   height: 550px
 }
 
+:deep(.amap-marker-label) {
+  border: none;
+  margin-left: -10px;
+  padding: -5px 3px;
+  background-color: rgba(255, 192, 203, 0.5);
+  border-radius: 10px;
+  line-height: 0.5em;
+  font-size: 0.8em;
+}
+
 @media only screen and (max-width: 768px) {
   #container {
     height: 450px

src/pages/admin/lepaoRecords/recordDetail.vue

@@ -9,7 +9,7 @@
                 </a-space>
             </a-skeleton>
             <a-descriptions :data="info" :column="2" />
-            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD
+            <MapContainer v-if="showMap" :point_list="data.result.point_list" :log_list="data.point_data" :pathData="data.data" threeD
                 style="margin-top: 10px;" />
         </a-card>
     </div>

src/pages/lepao/lepaoRecords/recordDetail.vue

@@ -9,7 +9,7 @@
                 </a-space>
             </a-skeleton>
             <a-descriptions :data="info" :column="2" />
-            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD
+            <MapContainer v-if="showMap" :point_list="data.result.point_list" :log_list="data.point_data" :pathData="data.data" threeD
                 style="margin-top: 10px;" />
         </a-card>
     </div>