uniapp小程序使用高德地图api实现路线规划

邵彬

路线规划

简介

路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景。
高德开放平台
本例是驾车路线规划功能和位置选择地图api:chooseLocation

示例：

1、在页面的 js 文件中，实例化 AMapWX 对象，请求进行驾车路线规划。
首先，引入 amap-wx.js 文件（amap-wx.js  从相关下载页面下载的 zip 文件解压后得到）。

1. import amapFile from "@/libs/amap-wx.js";

复制代码

然后在 onLoad 实例化 AMapWX 对象

1. onLoad() {
2.          this.myAmapFunT = new amapFile.AMapWX({
3.                 key: 你申请的key
4.          })
5.         },

复制代码

最后生成请求进行驾车路线规划数据

1.                 /**
2.                          *@author ZY
3.                          *@date 2023/1/9
4.                          *@Description:生成规划路线
5.                          *@param {string} start 开始位置
6.                          *@param {string} end 结束位置
7.                          *@param {number} strategy 10 默认多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving
8.                          *
9.                          10，返回结果会躲避拥堵，路程较短，尽量缩短时间，与高德地图的默认策略也就是不进行任何勾选一致
10.                          * 4，躲避拥堵，但是可能会存在绕路的情况，耗时可能较长
11.                          2，距离优先，仅走距离最短的路线，但是可能存在穿越小路/小区的情况
12.                          */
13.                         getPlanningRoute(start, end, strategy = 10) {
14.                                 let that = this
15.                                 uni.showLoading({
16.                                         title: '加载中'
17.                                 });
18.                                 that.myAmapFunT.getDrivingRoute({
19.                                         origin: start,
20.                                         destination: end,
21.                                         strategy: strategy, //备选方案
22.                                         success: function(data) {
23.                                                 // console.log('所有路径',data)
24.                                                 if (data.paths && data.paths[0] && data.paths[0].steps) {
25.                                                         // 默认 10 会 对返回多条路径的方案  按照时间短的
26.                                                         let goodRouter = data.paths.sort((a, b) => {
27.                                                                 return a.duration - b.duration
28.                                                         })[0]
30.                                                         that.distance = (goodRouter.distance * 0.001).toFixed(2) + '公里'
31.                                                         that.duration = '大约' + (goodRouter.duration / 60).toFixed(2) + '分钟'
33.                                                         let steps = goodRouter.steps
34.                                                         let points = []
35.                                                         for (var i = 0; i < steps.length; i++) {
36.                                                                 var poLen = steps[i].polyline.split(';');
37.                                                                 for (var j = 0; j < poLen.length; j++) {
38.                                                                         points.push({
39.                                                                                 longitude: parseFloat(poLen[j].split(',')[0]),
40.                                                                                 latitude: parseFloat(poLen[j].split(',')[1])
41.                                                                         })
42.                                                                 }
43.                                                         }
44.                                                         that.polyline = [{
45.                                                                 points: points,
46.                                                                 color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' :
47.                                                                         '#ee6b06',
48.                                                                 width: 8,
49.                                                         }]
50.                                                 }
51.                                                 uni.hideLoading();
52.                                         },
53.                                         fail: function(info) { //失败回调
54.                                                 console.log('路线规划失败')
55.                                                 console.log(info)
56.                                                 uni.hideLoading();
57.                                                 uni.showToast({
58.                                                         title: '路线规划失败',
59.                                                         icon: 'error'
60.                                                 });
61.                                         },
62.                                 })
63.                         },

复制代码

2.完整源码组件

1. <template>
2.         <view >
3.                 <view  @click="toBack">
4.                         <image src="http://img.wisdomtaxi.com/toBack.png" ></image>
5.                 </view>
6.                 <map  :latitude="startPoint.latitude" :longitude="startPoint.longitude" show-location
7.                         :polyline="polyline" @markertap="markertap" :key="polyline.length + new Date().getTime()"
8.                         :markers="markers">
9.                         <cover-view slot="callout">
10.                                 <block v-for="(item,index) in markers" :key="index">
11.                                         <cover-view  :marker-id="item.id">
12.                                                 <cover-view >
13.                                                         {{item.title}}
14.                                                 </cover-view>
15.                                         </cover-view>
16.                                 </block>
17.                         </cover-view>
18.                 </map>
19.                 <view >
20.                         <view  v-if="endPoint.address">
21.                                 <view  v-for="item in btnList" :key="item.value"
22.                                         : @click="selectRouteType(item.value)">
23.                                         {{item.name}}
24.                                 </view>
25.                         </view>
26.                         <view  v-if="distance || duration">
27.                                 <u-icon name="file-text-fill" color="#FFA500" size="17"></u-icon>
28.                                 <view >
29.                                         距离：{{distance}} 时间：{{duration}}
30.                                 </view>
31.                         </view>
32.                         <view >
33.                                 <u-icon name="map-fill" color="#33a63b" size="17"></u-icon>
34.                                 <view >
35.                                         您将在 <text >{{startPoint.name | fmtEndAddr}}</text> 上车
36.                                 </view>
37.                         </view>
38.                         <view  v-if="endPoint.name">
39.                                 <u-icon name="map-fill" color="#ee642b" size="17"></u-icon>
40.                                 <view >
41.                                         {{endPoint.name|fmtEndAddr}}
42.                                 </view>
43.                         </view>
44.                         <view  @click="openChooseLocation">
45.                                 <u-icon name="search" color="#ffa602" size="23"></u-icon>
46.                                 <view >
47.                                         请选择目的地
48.                                 </view>
49.                         </view>
50.                         <view v-if="endPoint.name" @click="submitToDriver" >
51.                                 发送给司机
52.                         </view>
53.                 </view>
54.         </view>
55. </template>

复制代码

来源:https://www.cnblogs.com/zy-mg/p/17039609.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！