|
@@ -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 {
|