fix: 修改当前轮船位置聚焦图标大小

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- <el-button @click="test1">测试</el-button> -->
+  <!-- <el-button @click="test">测试</el-button> -->
   <div
     id="tracking-map"
     ref="mapContainer"
@@ -247,15 +247,14 @@ const showTrackLine = (pts, jj, opts) => {
   //   const arrowIcon = L.divIcon({
   //     html: `
   //     <div  style="transform: rotate(${angle + 270}deg);" class="container">
-  //   <div class="circle"></div>
-  //   <span class="font_family icon-icon_ocean_b"></span>
-  // </div>
-
+  //       <div class="circle"></div>
+  //       <span style="color:white;border:1px solid white" class="font_family icon-icon_path_b"></span>
+  //     </div>
   //     `,
   //     className: 'arrow-icon',
-  //     iconSize: [24, 24],
-  //     iconAnchor: [12, 12], // 箭头的中心点
-  //     popupAnchor: [0, -12] // 弹出框的锚点
+  //     iconSize: [50, 50],
+  //     iconAnchor: [25, 25], // 箭头的中心点
+  //     popupAnchor: [0, -25] // 弹出框的锚点
   //   })
 
   //   // 创建箭头标记，并根据计算出的角度旋转箭头
@@ -442,35 +441,7 @@ const getMarker = () => {
     .then((res) => {
       if (res.code === 200) {
         const { data } = res
-        data.point = [
-          {
-            lng: '101.40000000',
-            lat: '3.00000000',
-            label: 'Origin',
-            infor: 'PORT KLANG, MALAYSIA',
-            sort: '1',
-            stime: null,
-            ptype: 'pol'
-          },
-          {
-            lng: '-81.09008789',
-            lat: '32.08044084',
-            label: 'Destination',
-            infor: 'SAVANNAH, GA',
-            sort: '2',
-            stime: null,
-            ptype: 'pod'
-          },
-          {
-            lng: '103.81666667',
-            lat: '1.26666667',
-            label: 'Transfer',
-            infor: 'SINGAPORE',
-            sort: '3',
-            stime: null,
-            ptype: 'poe'
-          }
-        ]
+
         data?.point &&
           data?.point.forEach((item) => {
             const iconColorList = {
@@ -696,21 +667,23 @@ const test1 = () => {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 12px;
-      height: 12px;
+      width: 24px;
+      height: 24px;
       padding: 4px;
       font-size: 9px;
       color: white;
       background-color: rgba(255, 117, 0, 1);
       border-radius: 50%;
+      font-size: 18px;
+      border: 1px solid white;
     }
   }
   .circle {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 12px;
-    height: 12px;
+    width: 24px;
+    height: 24px;
     background-color: rgba(255, 117, 0, 1);
     border-radius: 50%;
     position: relative;
@@ -727,12 +700,12 @@ const test1 = () => {
     }
 
     50% {
-      transform: scale(1.44); /* 从 18px 扩展到 24px (18 * 1.33 = 24) */
+      transform: scale(1.5); /* 从 18px 扩展到 24px (18 * 1.33 = 24) */
       opacity: 0.7;
     }
 
     100% {
-      transform: scale(1.67); /* 从 18px 扩展到 30px (18 * 1.67 ≈ 30) */
+      transform: scale(2); /* 从 18px 扩展到 30px (18 * 1.67 ≈ 30) */
       opacity: 0.2;
     }
   }