+
95
-

回答


首先登陆腾讯位置服务网站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;

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
}],

})
}

})

},

});

官方的webserviceapi接口文档地址:https://lbs.qq.com/service/webService/webServiceGuide/webServiceRoute

项目源码下载地址:map.zip

网友回复

我知道答案,我要回答