微信小程序中地图导航的使用，分高德导航和腾讯导航
微信小程序中使用导航功能可食用高德导航和腾讯导航或者百度的导航，此文章主要介绍腾讯导航和高德导航。后面会贴出具体实现导航的代码。
地图基础使用map 标签，具体使用方法可参考微信的官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/map.html
腾讯地图sdk：
http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
高德地图sdk：
https://a.amap.com/lbs/static/zip/AMapWX_SDK_V1.2.1.zip
需要申请相应平台的key，然后将下载好的sdk放到小程序中，在需要的地方加载进来：
在需要导航的小程序页面js文件的顶部引入
var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');//引入腾讯地图sdk
var amapFile = require('../../lib/amap-wx.js');//引入高德地图sdk
然后利用小程序地图中maker 点击方法调用到相应的方法来获取目的地的坐标
例子是步行导航，可根据项目情况更改，具体实现方法如下：
/**
* 高德地图路线规划
*/
markclick1:function(res){
var that = this;
var id = res.markerId;
var zid = id - 1;
wx.showModal({
title: '温馨提示',
content: '是否立即前往，系统会为您导航，并规划路线',
cancelText: '暂时不去',
confirmText: '立即前往',
success: function (re) {
if (re.confirm == true) {
wx.showLoading({
title: '规划路线中,请稍后',
})
var myAmapFun = new amapFile.AMapWX({ key:'填写你申请的相应key值'});
myAmapFun.getWalkingRoute({
origin: that.data.long + ',' +that.data.lat,
destination: that.data.markers[zid].longitude + ',' + that.data.markers[zid].latitude ,
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])
})
}
}
}
console.log(points)
that.setData({
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
});
}
wx.hideLoading();
that.shishi();
},
fail: function (info) {
wx.hideLoading();
if (info.infocode =='20803'){
wx.showModal({
title: '温馨提示',
content: '目的地超出步行距离',
showCancel: false
})
}else{
wx.showModal({
title: '温馨提示',
content: '路线规划失败',
showCancel: false
})
}
console.log(info)
}
})
}
}
})
},
markclick:function(res){
var that=this;
var id=res.markerId;
var zid=id-1;
wx.showModal({
title: '温馨提示',
content: '是否立即前往，系统会为您导航，并规划路线',
cancelText:'暂时不去',
confirmText:'立即前往',
success:function(re){
console.log(that.data.markers[zid])
if (re.confirm==true){
wx.showLoading({
title: '规划路线中,请稍后',
})
var qqmapwx=new QQMapWX({
key:'填写你申请的相应key值'
})
qqmapwx.direction({
mode:'walking',
from:{
latitude: that.data.lat,
longitude: that.data.long
},
to:{
latitude: that.data.markers[zid].latitude,
longitude: that.data.markers[zid].longitude
},
success:function(r){
console.log(r)
var ret = r;
var coors = ret.result.routes[0].polyline, pl = [];
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log(pl)
that.setData({
lat: pl[0].latitude,
long: pl[0].longitude,
polyline: [{
points: pl,
color: '#FF0000DD',
width: 4
}]
})
},
fail:function(r){
console.error(r)
if(r.message){
wx.showModal({
title: '温馨提示',
content: r.message,
showCancel:false
})
}
},
complete:function(){
wx.hideLoading();
}
})
}
}
})
},
然后是需要实时定位：
可利用小程序的getLocation 进行实时定位。具体实现方法如下：
//实时定位自己的位置 可根据项目需要调整实时获取位置坐标的时间
shishi:function(){
var that=this;
that.data.myloc=setInterval(function (){
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.data.polyline[0]={
latitude: res.latitude,
longitude: res.longitude
}
console.log(that.data.polyline)
that.setData({
lat: res.latitude,
long: res.longitude
}
)
},})
},6000)
}
})