一、腾讯地图(微信小程序JavaScript SDK)
申请密钥key微信小程序JavaScript SDK | 腾讯位置服务
获取当前地址、地址解析
<!-- wxml -->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location style="width: 100%; height: 300px;"></map>
//js
var QQMapWX = require('./../../../utils/qqmap-wx-jssdk.js');
var that=this
// 获取当前地址
wx.getLocation({
type: 'gcj02',
success:function(res){
const location={
lat: res.latitude,
lng: res.longitude,
}
that.setData({
latitude:res.latitude,
longitude:res.longitude
})
//地址解析
var demo = new QQMapWX({
key: '***'// 这个KEY的获取方式在上面链接 腾讯位置服务的开发文档中有详细的申请密钥步骤
});
demo.reverseGeocoder({
location: {
latitude: location.lat,
longitude: location.lng
},
success: function (res) {
//获得地址
that.setData({
locationTransport:res.result.address
})
},
fail: function (res) {
console.log(res);
},
});
}
})
路线规划
<!-- wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}"
bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}"
bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
//js
formSubmit(e) {
var _this = this;
var qqmapsdk = new QQMapWX({
key: '773BZ-NTAWG-SKWQ4-II5RW-XVE33-CUBZF' // 必填
});
//调用距离计算接口
qqmapsdk.direction({
mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
//from参数不填默认当前地址
from: '34.24259,108.93878',
to: '34.22259,108.94878',
success (res) {
console.log('成功后所有数据',res);
var ret = res;
var coors = ret.result.routes[0].polyline, pl = [];
//坐标解压(返回的点串坐标,通过前向差分进行压缩)
var kr = 1000000;
console.log('解压前',coors[0]);
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
console.log('解压后',coors[0]);
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log('pl追加数据',pl)
//设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
_this.setData({
latitude:pl[0].latitude,
longitude:pl[0].longitude,
polyline: [{
points: pl,
color: '#FF0000DD',
width: 6
}]
})
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
});