问题:微信小程序测试号在开发者工具中可以显示出地图路线,而手机扫码不能显示路径,手机真机调试可以显示出路径。
解决:在微信消息界面下拉,有一个最近使用的小程序,把测试号删了就能正常显示了,可能是因为缓存问题导致不显示。
问题:在微信开发者工具中定位总是定位到人民政府。
解决:因为电脑上小程序是使用ip定位,所以会不准确,以真机调试为准。
使用腾讯地图api实现线路规划
首先按照步骤来做
在小程序根目录下新建libs文件夹,将下载的SDK放在文件夹中,如图
下载 jssdkv1.2
//在js文件中最上面写(page外面)
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
key: '你的key值' // 必填
});
//在js文件的page里写
data: {
polyline: [],
markers: [ //在地图上根据经纬度标记点
{
id:0,
iconPath:"/img/marker_red.png", //这个是我的图片位置,不要直接复制
longitude:'自己填写',
latitude:'自己填写'
},
{
id:1,
iconPath:"/img/marker_red.png", //这个是我的图片位置,不要直接复制
longitude:'自己填写',
latitude:'自己填写',
}
],
latitude: '',
longitude: '',
address:"",
},
onLoad: function() {
var that=this;
wx.getLocation({
type:"gcj02",
success:function(res){
that.setData({
latitude:res.latitude,
longitude:res.longitude
})
qqmapsdk.direction({
mode:'driving',
from:{ //起始点的经纬度
latitude:res.latitude,
longitude:res.longitude
},
to:'自己填写',//目的地的经纬度
waypoints:'自己填写',//途径的地点的经纬度
policy:'LEAST_TIME,NAV_POINT_FIRST',
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属性,将路线显示出来,将解压坐标第一个数据作为起点
that.setData({
// latitude: pl[0].latitude,
// longitude: pl[0].longitude,
polyline: [{
points: pl,
color: "#20B2AA", width: 4, dottedLine: false
}]
})
},
fail:function (error) {
console.log(error);
},
complete:function (res) {
console.log(res);
}
});
}
})
},
具体路线规划详情方法可查看官网
wxml中写以下内容
<map
longitude="{{longitude}}"
latitude="{{latitude}}"
markers="{{markers}}"
polyline="{{polyline}}"
show-location
scale='14'
style="width:100%;height:300px;">
</map>
OK!!!