瀏覽代碼

定点分析 默认显示第一条路线,修复路线错误问题

Hwf 2 月之前
父節點
當前提交
9f0070bdd1
共有 1 個文件被更改,包括 26 次插入12 次删除
  1. 26 12
      src/views/globalMap/RightMenu/FixedPointAnalysis.vue

+ 26 - 12
src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -65,10 +65,15 @@
           <i class="icon-close2" @click="showAddress = false" />
         </div>
         <div class="route-list">
-          <div v-for="(item, index) in routeData" :key="index" class="route-item2" @click="drawRoute(item)">
+          <div
+            v-for="(item, index) in routeData"
+            :key="index"
+            :class="index === selectIndex ? 'route-item2 route-item2-active' : 'route-item2'"
+            @click="drawRoute(item, index)"
+          >
             <div class="text-box1">
               <div :class="'tag tag' + index">{{ getTag(index) }}</div>
-              <div class="text1">{{ item.strategy }}</div>
+<!--              <div class="text1">{{ item.strategy }}</div>-->
             </div>
             <div class="route-info">
               <div class="text-box2">
@@ -224,32 +229,34 @@ const createMarks = (item, unFitView) => {
     }
   }
 };
+let selectIndex = ref(-1);
 const handleRoutes = async (item) => {
+  selectIndex.value = -1;
   const lnglat = gcoord.transform([item.longitude, item.latitude], gcoord.WGS84, gcoord.GCJ02);
   const lnglat2 = gcoord.transform([selectData.value.longitude, selectData.value.latitude], gcoord.WGS84, gcoord.GCJ02);
-  const start = [lnglat[0], lnglat[1]];
-  const end = lnglat2;
+  const start = [lnglat[0].toFixed(6), lnglat[1].toFixed(6)];
+  const end = [lnglat2[0].toFixed(6), lnglat2[1].toFixed(6)];
   showAddress.value = true;
   routesAddress.value = item.address;
-  // 10速度最快 返回结果会躲避拥堵,路程较短,尽量缩短时间,与高德地图的默认策略也就是不进行任何勾选一致
-  // 16费用最低 返回的结果尽量不走高速,并且尽量规划收费较低甚至免费的路径结果,与高德地图的“避免收费&不走高速”策略一致
-  const url = `https://restapi.amap.com/v3/direction/driving?origin=${start}&destination=${end}&key=${amapKey}`;
-  const response = await fetch(url + '&strategy=10');
+  const url = `https://restapi.amap.com/v5/direction/driving?origin=${start.toString()}&destination=${end.toString()}&key=${amapKey}`;
+  const response = await fetch(url + '&strategy=32&show_fields=polyline,cost');
 
   if (!!response.ok) {
     const data = await response.json();
     if (data.route && data.route.paths) {
       data.route.paths.forEach((item) => {
-        item.duration = formatDate(item.duration);
+        item.duration = formatDate(item.cost?.duration);
       });
       routeData.value = data.route.paths;
+      // 默认展示第一条
+      drawRoute(routeData.value[0], 0);
     } else {
       routeData.value = [];
     }
   }
 };
-
-const drawRoute = (route) => {
+const drawRoute = (route, index) => {
+  selectIndex.value = index;
   const path = parseRouteToPath(route);
   clearLine();
   if (AMapType.includes(props.activeMap)) {
@@ -654,8 +661,11 @@ onMounted(() => {
       width: 100%;
       background: #1f2c4e;
       padding: 5px;
-      margin-top: 6px;
+      margin-top: 15px;
       cursor: pointer;
+      &:hover {
+        border: 3px solid #01e3fb;
+      }
       .text-box1 {
         display: flex;
         padding: 0 15px;
@@ -665,6 +675,7 @@ onMounted(() => {
           border-radius: 10px;
           padding: 2px 6px;
           font-size: 36px;
+          margin-right: 10px;
         }
         .tag0 {
           color: #fff;
@@ -727,6 +738,9 @@ onMounted(() => {
         }
       }
     }
+    .route-item2-active {
+      border: 3px solid #01e3fb;
+    }
   }
 }
 .title {