下面我将针对“微信小程序 高德地图路线规划实现过程详解”给出完整攻略。
1. 准备工作
在进行微信小程序中的路线规划实现前，需要先前往高德开放平台进行申请并获取到 Web API Key，之后根据所需进行接口授权，获取相关权限。之后需要创建微信小程序，并获取到AppId，最后在 小程序后台-开发-开发设置 中将域名加入到 request 合法域名中。
2. 实现步骤
2.1 引入高德地图SDK
首先需要在小程序的 page.json 文件中添加高德地图SDK的引用地址：
{
"usingComponents": {
"amap": "path/to/amap/amap"
}
}
然后通过 npm 安装 wx-amap-graphics 和 wx-amap-wx 模块：
npm i wx-amap-graphics wx-amap-wx --save
在小程序页面中引入：
import Amap from './libs/amap-wx.js'
import AmapGraphics from './libs/amap-wx-graphics.js'
2.2 获取定位信息
wx.getLocation({
type: 'gcj02',
success(res) {
console.log(res)
}
})
wx.getLocation() 函数是微信小程序提供的获取用户地理位置的接口。其中 type 参数指定了返回值的坐标系，gcj02 是中国国家测绘局制定的坐标系，也是高德地图所采用的坐标系。获取到用户当前所处位置后，可以用来设置起点坐标点。
2.3 实现路线规划
wx.request({
url: 'https://restapi.amap.com/v3/direction/driving',
data: {
origin: `${startLocation.lng},${startLocation.lat}`,
destination: `${endLocation.lng},${endLocation.lat}`,
key: '高德地图Web API Key'
},
success(res) {
console.log(res)
}
})
在路线规划过程中，需要使用高德地图提供的 “direction/driving” 接口，该接口实现了驾车路线的计算，并返回路线方案规划的结果。其中 {startLocation, endLocation} 是构造好的起点及终点地理位置对象。请求成功后，依据结果完成后续业务逻辑。
2.4 渲染地图
通过高德地图SDK将路线渲染至地图上。在微信小程序开发过程中，可以使用 <amap /> 组件：
<amap class="map" id="myMap" scale="15"
polyline="{{polyline}}"
markers="{{markers}}"
circles="{{circles}}"
controls="{{controls}}"
bindcomplete="onMapComplete"
/>
其中，<amap /> 组件是高德地图的渲染组件，通过各类属性将路线及其他地理信息渲染至地图上实现展示效果。各类属性中的 markers 用于设置地图标记点，可以通过设置不同的图标及其他属性之实现对地理位置的标注；polyline 属性用于设置地图上的路径线段；controls 则用于控制地图视图上的缩放尺度等事件的控制。
3. 示例
下面是一个基于微信小程序，通过高德地图实现驾车路线规划的示例代码：
// index.js
import Amap from './libs/amap-wx.js'
import AmapGraphics from './libs/amap-wx-graphics.js'
Page({
data: {
startLocation: {},
endLocation: {},
polyline: [],
circles: [],
markers: [],
controls: [{
id: 1,
iconPath: '/images/plus.png',
position: {
left: 10,
top: 10,
width: 40,
height: 40
},
clickable: true
}, {
id: 2,
iconPath: '/images/minus.png',
position: {
left: 10,
top: 60,
width: 40,
height: 40
},
clickable: true
}]
},
onLoad() {
this.onCreateMap()
},
onCreateMap() {
let s = wx.getSystemInfoSync()
let w = s.windowWidth
let h = s.windowHeight
this.amap = new Amap.AMapWX({
key: '高德地图Web API Key',
version: '1.4.0'
})
let that = this
this.amap.getRegeo({
success: data => {
let startLocation = {
lng: data[0].longitude,
lat: data[0].latitude
}
let endLocation = {
lng: data[0].longitude + 0.015,
lat: data[0].latitude + 0.01
}
that.setData({
startLocation,
endLocation
})
that.getRoute()
},
fail: info => {
console.log(info)
}
})
},
getRoute() {
wx.showLoading({
title: '正在加载...',
})
let that = this
wx.request({
url: 'https://restapi.amap.com/v3/direction/driving',
data: {
origin: `${that.data.startLocation.lng},${that.data.startLocation.lat}`,
destination: `${that.data.endLocation.lng},${that.data.endLocation.lat}`,
key: '高德地图Web API Key'
},
success(res) {
wx.hideLoading()
console.log(res)
let steps = res.data.route.paths[0].steps
let path = []
let markers = []
let segments = []
for (let i = 0; i < steps.length; i++) {
let polyline = []
let points = steps[i].polyline.split(';')
let startPoint = {
lng: parseFloat(points[0].split(',')[0]),
lat: parseFloat(points[0].split(',')[1])
}
let endPoint = {
lng: parseFloat(points[points.length - 1].split(',')[0]),
lat: parseFloat(points[points.length - 1].split(',')[1])
}
path.push({
points,
color: "#0091ff",
width: 6
})
markers.push({
iconPath: "/images/marker.png",
longitude: startPoint.lng,
latitude: startPoint.lat,
width: 50,
height: 50
})
if (i === 0) {
segments.push({
start: that.data.startLocation,
end: startPoint
})
} else {
let lastStep = steps[i - 1]
let lastPoints = lastStep.polyline.split(';')
let lastEndPoint = {
lng: parseFloat(lastPoints[lastPoints.length - 1].split(',')[0]),
lat: parseFloat(lastPoints[lastPoints.length - 1].split(',')[1])
}
segments.push({
start: lastEndPoint,
end: startPoint
})
}
}
markers.push({
iconPath: "/images/mark_b.png",
longitude: that.data.endLocation.lng,
latitude: that.data.endLocation.lat,
width: 50,
height: 50
})
that.setData({
polyline: path,
markers: markers,
segments: segments
})
},
fail: err => {
wx.hideLoading()
console.log(err)
}
})
},
onMapComplete() {
let that = this
this.amap.createMarkers({
markers: that.data.markers,
success: data => {
console.log(data)
}
})
this.amap.createPolyline({
polylines: that.data.polyline,
success: data => {
console.log(data)
}
})
this.amap.getCenterLocation({
success: data => {
console.log(data)
}
})
this.setData({
circles: [{
longitude: that.data.startLocation.lng,
latitude: that.data.startLocation.lat,
fillColor: '#FF000033',
radius: 80
}, {
longitude: that.data.endLocation.lng,
latitude: that.data.endLocation.lat,
fillColor: '#FF000033',
radius: 80
}]
})
},
handleClickControl(e) {
let id = e.controlId
let scale = this.amap.getScale()
if (id === 1) {
scale += 1
} else {
scale -= 1
}
this.amap.setScale(scale)
}
})
另外，这里还需注意将页面中 amap 组件的尺寸及其他属性进行添加和设置以达到最终的路线及地图展示的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：微信小程序 高德地图路线规划实现过程详解 - Python技术站
微信扫一扫 
支付宝扫一扫 