腾讯位置服务
注册账号
申请Key
设置名称和输入验证码,勾选sdk、webServiceApi默认勾选白名单,小程序输入自己的 APP Id
,点击确定按钮创建。
最后看到密钥即可成功。
下载SDK
在官方文档 下载SDK ,下载后有两个版本,哪个都可以正常使用。注意最后引入时的文件名。
安全域名设置
登录微信小程序后台设置安全域名。安全域名在下载SDK步骤的下面可复制。
使用
根据官方文档 路线规划 ,复制其结构代码。
根据代码,解释其中的变量:
- longitude:中心经度
- latitude:中心维度
- polyline:一开始固定的位置
<map
id="myMap"
style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}"
scale='16'
polyline="{{polyline}}"
show-location
>
</map>
然后继续往下滑,复制 JS
代码,require
中修改自己在第三步下载并解压好的sdk的文件路径,然后修改第二步自己申请好的key。
var QQMapWX = require('../../qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '自己的key' // 必填
});
继续往下看,有一个表单事件,我们只需要里面的逻辑代码,复制下来,粘贴到 onReady
函数内。运行发现报错,一个一个修改。
- 首先,
from
和to
的参数有误,因为我们是写死的,不是获取用户动态输入的,因此没有事件对象e,写死两个对象,一个起始位置,一个结束位置。 - 最后
polyline
数组对象内的color
属性有误,不是正常的16进制,改过来即可。这个颜色是起始位置到目的地的中间的路程线路颜色。
onReady() {
var _this = this;
//调用距离计算接口
qqmapsdk.direction({
mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
//from参数不填默认当前地址
from: {
longitude: 113,
latitude: 23,
},
to: {
longitude: 103,
latitude: 23,
},
success: function (res) {
console.log(res);
var ret = res;
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;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log(pl)
//设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
_this.setData({
latitude:pl[0].latitude,
longitude:pl[0].longitude,
polyline: [{
points: pl,
color: '#333999',
width: 4
}]
})
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
});
},
最后根据我设置的经纬度,成功定位到了广州去昆明的路线。