微信小程序之高德地图多点路线规划过程示例详解

网友投稿 858 2023-11-11

调用

如何调用高德api？

微信小程序之高德地图多点路线规划过程示例详解

高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细：

第一步，注册高德开发者

第二部，去控制台创建应用

即点击右上角的控制平台创建应用

创建应用绑定服务记得选择微信小程序；同时在https://lbs.amap.com/api/wx/gettingstarted中-开发包

第三步，登陆微信公众平台在开发设置中将高德域名配置上

https://restapi.amap.com

第四步，打开微信开发者工具，打开微信小程序，在项目中新建一个libs文件夹

将在高德官网上-得到的开发包解压，将其中的 amap-wx.js 文件放在libs文件夹下

同时创建config.js

?
1
2
3
4
var config = {
key:请在此填入你申请的key
}
module.exports.Config = config;

在其他界面js部分中即可调用高德api

?
1
2
var amapFile = require(../../libs/amap-wx.js);
var config = require(../../libs/config.js);

两点之间的导航

这是实现多点路线规划的基础，非常重要！！！

实现效果

以驾车为例，注：界面使用的是colorui

wxml部分：

js部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
var amapFile = require(../../libs/amap-wx.js);
var config = require(../../libs/config.js);
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
markers: [{
iconPath: "../../img/mapicon_navi_s.png",
id: 0,
latitude: 39.989643,
longitude: 116.481028,
width: 23,
height: 33
},{
iconPath: "../../img/mapicon_navi_e.png",
id: 0,
latitude: 39.90816,
longitude: 116.434446,
width: 24,
height: 34
}],
distance: ,
cost: ,
state: 0,
method:[驾车,公交,骑行,步行],
index:0,
TabCur:0,
polyline: [],
transits: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
wx.showLoading({
title: "定位中",
mask: true
})
wx.getLocation({
type: gcj02,
altitude: true, //高精度定位
success: function(res) {
console.info(res);
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
that.setData({
markers: [{
name: 当前位置,
latitude: latitude,
longitude: longitude
}, {
name: 您要去哪儿?,
latitude: ,
longitude:
}]
})
},
fail: function() {
wx.showToast({
title: "定位失败",
icon: "none"
})
},
complete: function() {
wx.hideLoading()
}
})
},
//选择器改变函数
tabSelect(e) {
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
//获取出发地
getFormAddress: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
var name = res.name
var address = res.address
var latitude = res.latitude
var longitude = res.longitude
var markesName = "markers[" + 0 + "].name";
var markesLatitude = "markers[" + 0 + "].latitude";
var markeslongitude = "markers[" + 0 + "].longitude";
var markesiconPath = "markers[" + 0 + "].iconPath";
that.setData({
[markesName]: name,
[markesLatitude]: latitude,
[markeslongitude]: longitude,
[markesiconPath]: "../../img/mapicon_navi_s.png"
})
},
fail: function() {
wx.showToast({
title: 定位失败,
icon: "none"
})
},
complete: function() {
//隐藏定位中信息进度
wx.hideLoading()
}
})
},
//获取目的地
getToAddress: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
console.log(res);
var name = res.name
var address = res.address
var latitude = res.latitude
var longitude = res.longitude
var markesName = "markers[" + 1 + "].name";
var markesLatitude = "markers[" + 1 + "].latitude";
var markeslongitude = "markers[" + 1 + "].longitude";
var markesiconPath = "markers[" + 1 + "].iconPath";
that.setData({
[markesName]: name,
[markesLatitude]: latitude,
[markeslongitude]: longitude,
[markesiconPath]: "../../img/mapicon_navi_e.png"
})
},
fail: function() {
wx.showToast({
title: 定位失败,
icon: "none"
})
},
complete: function() {
//隐藏定位中信息进度
wx.hideLoading()
}
})
},
/**
* 确定
*/
getSure: function() {
var that = this;
var origin = that.data.markers[0].longitude + , + that.data.markers[0].latitude;//出发地
var destination = that.data.markers[1].longitude + , + that.data.markers[1].latitude; //目的地
var TabCur=this.data.TabCur;
app.origin = origin;
app.destination = destination;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({
key: key
});
if(TabCur==0){
myAmapFun.getDrivingRoute({//获取驾车路线
origin: origin,
destination: destination,
success: function(data) {
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(;);
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(,)[0]),
latitude: parseFloat(poLen[j].split(,)[1])
})
}
}
}
that.setData({//将路线在地图上画出来
state: 1,
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
});
if (data.paths[0] && data.paths[0].distance) {
that.setData({
distance: data.paths[0].distance + 米
});
}
if (data.taxi_cost) {
that.setData({
cost: 打车约 + parseInt(data.taxi_cost) + 元
});
}
}
})
}
},
/**
* 详情页
*/
goDetail: function() {
var TabCur=this.data.TabCur;
if(TabCur==0){
wx.navigateTo({
url: ../detail/detail
})
}
},
})

wxss部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.flex-style{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-item{
height: 35px;
line-height: 35px;
text-align: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1
}
.flex-item.active{
color:#0091ff;
}
.map_title{
position:absolute;
top: 10px;
bottom: 110px;
left: 0px;
right: 0px;
}
.map_btn{
position:absolute;
top: 150px;
bottom: 220px;
left: 0px;
right: 0px;
}
.map_box{
position:absolute;
top: 187px;
bottom: 70px;
left: 0px;
right: 0px;
}
#navi_map{
width: 100%;
height: 100%;
}
.text_box{
position:absolute;
height: 70px;
bottom: 0px;
left: 0px;
right: 0px;
}
.text_box .text{
margin: 15px;
}

详情页部分：

html部分：

?
1
2
3
<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
{{i.instruction}}
</view>

js部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var amapFile = require(../../libs/amap-wx.js);
var config = require(../../libs/config.js);
const app = getApp()
Page({
data: {
steps: {}
},
onLoad: function () {
var that = this;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key });
myAmapFun.getDrivingRoute({
origin: app.origin,
destination: app.destination,
success: function (data) {
if (data.paths && data.paths[0] && data.paths[0].steps) {
that.setData({
steps: data.paths[0].steps
});
}
},
fail: function (info) {
}
})
}
})

wxss部分：

?
1
2
3
4
5
6
7
8
9
10
Page{
}
.text_box{
margin: 0 15px;
padding: 15px 0;
border-bottom: 1px solid #c3c3c3;
font-size: 13px;
}
.text_box .text_item{display:inline-block;line-height: 8px;}

其他公交、骑行、步行方法与驾车类似，可以查看高德开放文档学习

我的设计上公交可以查看不同城市的公交路线，而非只能查看一个城市的，实现很简单，在界面上添加了一个选择器城市参数传至city，即可查看不同城市的公交路线

多点路线规划

实现效果：可以选择出发地，选择不同的景点，根据不同的出行方式给出一条距离最短的路径

实现思路：

获取到周边的景点位置等相关信息 将用户添加的景点信息传到下一个页面进行计算 获得所有可能的路线并计算每一条路线的长度找出距离最短的一条

踩坑

一开始打算利用深度优先搜索算法实现，但是发现在现实的地图中，任意两点之间几乎都存在路，并不像抽象后的数学题一样。于是最后使用了全排列的方法获取到了所有的路线。 在全排列的过程中需要递归调用函数，涉及到传参问题，需要将自定义的带参函数写在Page外，写在Page里的话，我尝试了很多方式调用函数都会报错。 在使用高德api获取路径的函数后，无法计算每一段路线的长度，最后发现是在函数调用的过程中，存储路线距离的数组只是暂存的，在函数调用后无法使用该数组来计算距离。于是最后我在函数调用的过程中计算每一条路线的长度并进行比较，最后用this.setData的方法将最后得到的路线展示在界面上。

具体实现

获取出发地、出行方式并赋值给全局变量传递掉下一个界面，如app.origin = origin。 利用getPoiAround函数获取到周边的景点信息，querykeywords可以固定设置为景区，将返回的前二十条景区信息展示在界面上。 将用户选择的景点信息存入数组并传递到下一个界面进行计算。 利用全排列获取到所有可能的路线并去重。 计算每一条路线的长度并找到最小的一条将其展示在界面上。

注：获取到每一条路线距离的方法和获取到两个地点之间不同出行方式路线的方法在前面两点之间的导航部分，多点之间的路线导航其实就是将多个两点之间的路线导航连在了一起。先将前面的两点之间的不同出行方式导航实现后，改动细微的部分，再加入全排列的算法和大小比较的算法即可实现，在此就不贴出源码。

希望我的思路能给予你启发~

可优化部分

querykeywords可以设置为让用户选择不同的标签，如：户外、娱乐、美食、宾馆等等。 可让用户选择不同标签的地点将其存入数组计算一条出行的最短路径。 可以在最终的展示界面显示地图让用户更直观地查看各个地点之间的方位及距离信息。 最优导航形式：实时导航。

注：以上四条是我暂时想到的可优化的部分，算是给自己挖了一个坑，等我填完来这里写个实现方式。

到此这篇关于微信小程序之高德地图多点路线规划过程示例详解的文章就介绍到这了,更多相关高德地图多点路线

您可能感兴趣的文章:React使用高德地图的实现示例(react-amap)Java环境下高德地图Api的使用方式Android高德地图marker自定义弹框窗口SpringBoot整合Mybatis实现高德地图定位并将数据存入数据库的步骤详解前端vue如何使用高德地图微信小程序基于高德地图API实现天气组件(动态效果)vue+高德地图实现地图搜索及点击定位操作React+高德地图实时获取经纬度,定位地址

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：示例 程序 微信小程序 小程序 参数
上一篇:微信小程序实现签到功能
下一篇:开放银行数字生态—拓展金融服务的未来
相关文章

 发表评论

暂时没有评论，来抢沙发吧~