想要使用腾讯地图,首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开放平台,具体的申请流程不详述了,有需要的自行百度,重点讲一下使用微信小程序原生组件map,配合腾讯地图的一些api来实现路线规划功能。
重点:需要自己去看原生map组件的一些属性和方法。
效果图如下:
效果图.png
// html部分
<map id="map"
name="citymap"
longitude="{{longitude}}"
latitude="{{latitude}}"
polyline="{{polyline}}"
markers="{{markers}}"
circles="{{circles}}"
scale="15"
subkey="SSSBZ-SQZK6-U3XSL-EPA5P-6VNK6-ANF4P"
show-location
show-compass
enable-rotate
style="width: 750rpx; height: 700rpx;">
</map>
js代码
var coors;
Page({
data: {
polyline: [],
markers: [{
latitude: 23.362490,
longitude: 116.715790,
iconPath:'../../assets/images/icon_start.png',width:48,height:48,
anchor:{x:0.4,y:0.5}
},
{
latitude: 23.37228,
longitude: 116.75498,
iconPath:'../../assets/images/icon_end.png',width:48,height:48,
anchor:{x:0.45,y:0.5}
}
],
longitude: '116.715790',
latitude: '23.362490'
},
onLoad: function (options) {
wx.request({
url: 'https://apis.map.qq.com/ws/direction/v1/bicycling/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key=' + 'SSSBZ-SQZK6-U3XSL-EPA5P-6VNK6-ANF4P',
success: function (res) {
coors = res.data.result.routes[0].polyline;
//解压
for (var i = 2; i < coors.length; i++) {
coors[i] = coors[i - 2] + coors[i] / 1000000;
}
console.log(coors)
//划线
var b = [];
for (var i = 0; i < coors.length; i = i + 2) {
b[i / 2] = {
latitude: coors[i],
longitude: coors[i + 1]
};
console.log(b[i / 2])
}
this.setData({
polyline: [{
points: b,
color: "#5996FF", //线的颜色
width: 4,
dottedLine: false,
}]
})
}
})
},
});