洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。
1027
2023-11-10
微信小程序 高德地图路线规划实现过程详解
前言
最近项目中做到相关网约车小程序。需要使用到地图中的路线规划，对3种地图进行了分析。这里稍微做一下总结：
百度地图 百度坐标 （BD-09） 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标(GCJ-02)微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时，需要注意坐标的转换。此类坐标的转换函数在网上都有，这里不做过多解释
准备工作：
1、在做小程序 ---- 路线规划之前，需要准备小程序APPID 以及相应使用地图的KEY值。
2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法：https://www.jb51-/article/166968.htm
各地图平台-------小程序开发的官方文档
1、高德地图： 微信小程序-路线规划,地图导航功能基于高德地图API官方文档 https://lbs.amap.com/api/wx/guide/route/route
2、百度地图： 微信小程序JavaScript API ----- http://lbsyun.baidu.com/index.php?title=wxjsapi （百度地图路线规划适用于：android / ios / web,故不适用，排除百度地图）
3、腾讯地图： 微信小程序JavaScript SDK 路线规划 --------- https://lbs.qq.com/qqmap_wx_jssdk/method-direction.html
因此使用高德地图和腾讯地图都可以进行路线规划，通过学习官方文档，了解到其实这两个平台的代码思路是一样的，以下以高德地图为例作详细的说明：
高德地图-路线规划开发：根据官方文档demo进行开发 ：https://lbs.amap.com/api/wx/guide/route/route
注意：数组数据在setData时候的使用方法
?
1
2
3
4
var markesName = "markers[" + 0 + "].name";
that.setData({
[markesName]: name,
})
注意需要先加载头部的相关文件
?
1
2
var amapFile = require(../../libs/amap-wx.js);
var config = require(../../libs/config.js);
文件config.js
效果图：
相关代码：
location.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
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,
polyline: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log(11);
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()
}
})
},
getFormAddress: 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[" + 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"
})
console.log(address1, that.data);
},
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"
})
console.log(address1, that.data);
},
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;
app.origin = origin;
app.destination = destination;
console.log(origin, origin);
console.log(destination, destination);
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getDrivingRoute({
origin: origin,
destination: destination,
// origin: 116.481028,39.989643,
// destination: 116.434446,39.90816,
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) + 元
});
}
console.log(that, that);
}
})
},
/**
* 详情页
*/
goDetail: function() {
var that = this;
wx.navigateTo({
url: ../detail/detail
})
}
})
location.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<view class="map_title">
<view bindtap=getFormAddress>
出发地：<input placeholder="出发地" type="text" name="" bindinput="" value={{markers[0].name}} />
</view>
<view bindtap=getToAddress>
目的地：<input placeholder="目的地" type="text" name="" bindinput="" value={{markers[1].name}} />
</view>
<button bindtap = getSure>确定</button>
</view>
<view wx:if="{{state==1}}">
<view class="map_box">
<map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
</view>
<view class="text_box">
<view class="text">{{distance}}</view>
<view class="text">{{cost}}</view>
<view class="detail_button" bindtouchstart="goDetail">详情</view>
</view>
</view>
location.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
53
54
55
56
57
58
59
60
61
62
.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: 120px;
bottom: 220px;
left: 0px;
right: 0px;
}
.map_box{
position:absolute;
top: 160px;
bottom: 90px;
left: 0px;
right: 0px;
}
#navi_map{
width: 100%;
height: 100%;
}
.text_box{
position:absolute;
height: 90px;
bottom: 0px;
left: 0px;
right: 0px;
}
.text_box .text{
margin: 15px;
}
.detail_button{
position:absolute;
bottom: 30px;
right: 10px;
padding: 3px 5px;
color: #fff;
background: #0091ff;
width:50px;
text-align:center;
border-radius:5px;
}
点击详情跳转页，显示导航详细说明：
detail.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) {
}
})
}
})
detail.wxml
?
1
2
3
<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
{{i.instruction}}
</view>
这只是个人的一个demo用例。仅做参考。其中还有很多瑕疵，不要介意哈。
以上就是本文的全部内容，希望对大家的学习有
您可能感兴趣的文章:微信小程序基于高德地图查找位置并显示文字微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例微信小程序 高德地图SDK详解及简单实例（源码-）微信小程序使用map组件实现路线规划功能示例微信小程序之高德地图多点路线规划过程示例详解
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
- 洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。
- 洞察企业如何通过FinClip提升跨平台小程序加载效率，适应多样化市场需求
- 洞察提升小程序标签管理，实现高效的金融行业数字化转型
- 洞察如何通过ios app灵活实现微信小程序的跨平台管理
- 洞察如何利用第三方app跳转到微信小程序提升企业运营效率
- 洞察探索小程序支付功能实现的最佳策略，如何通过FinClip技术简化支付流程并提升用户体验，助力企业数字化转型
- 洞察探索如何利用 FinClip 提供的跨平台小程序技术，实现高效的支付管理与合规运营
- 如何借助FinClip提升App小程序支付的敏捷性和合规性？
- 在数字化转型中，企业如何通过小程序支付提升客户体验和运营效率？
- 小程序开发设计在提升企业数字化转型效率中的关键作用
推荐文章
热评文章
暂时没有评论，来抢沙发吧~