首先登陆腾讯位置服务网站https://lbs.qq.com/
登陆后创建一个应用
勾选webserviceapi
并填写自己的微信小程序授权appid
提交后等待审核,审核通过后,就可以看到key了
wxml
<map id="map" style="width:100%;height:500px;" show-location="true" circles="{{circles}}" longitude="{{longitude}}" markers="{{markers}}" polyline="{{polyline}}" latitude="{{latitude}}" scale="14" ></map>js代码
var coors;官方的webserviceapi接口文档地址:https://lbs.qq.com/service/webService/webServiceGuide/webServiceRoute
Page({
data: {
longitude: 116.75498,
latitude: 23.37228,
polyline: [],
markers: [
{
latitude: 23.362490,
longitude: 116.715790,
iconPath: "/images/my_marker.png", //图标路径
},
{
latitude: 23.37228,
longitude: 116.75498,
iconPath: "/images/my_marker.png", //图标路径
},
],
},
onLoad: function (options) {
var that = this;
wx.request({
url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key=申请的key'
,
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])
}
let markers=that.data.markers;
markers.push( {
latitude: 23.373390,
longitude: 116.716590,
iconPath: "/images/no.png", //图标路径
width:340,
height:40,
label:{
content:"共"+ res.data.result.routes[0].distance/1000+"公里,大约需要"+res.data.result.routes[0].duration+"分钟",
bgColor:"#ff9000",
padding:"9px 20px",
alpha:1,
borderRadius:"50rpx",
display:"ALWAYS",
color:"#ffffff",
fontsize:14
}
}
);
console.log(markers);
that.setData({
markers:markers,
polyline: [{
points: b,
color: "#a52a2a",
width: 4,
dottedLine: false
}],
})
}
})
},
});
项目源码下载地址:map.zip
网友回复