wxml文件:
<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" show-compass="true" show-location="true" show-scale="true" enable-rotate="true"
markers="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style='width:100%;height:90vh;'>
</map>
<view class="mapbox">
<view class="box-title">考场地址:</view>
<view class="box-desc">{{place}}</view>
</view>
wxss文件:
.mapbox{
width: 480rpx;
}
.box-title{
margin-left: 180rpx;
font-size: 17px;
}
.box-desc{
font-size: 15px;
color: darkgray;
}
js文件:
// 引入SDK核心类
import QQMapWX from 'qqmap-wx-jssdk.min.js';
let qqMap = new QQMapWX({
key: ''
});
Page({
data: {
ployline: [],
lng: 0,
lat: 0
},
onLoad: function (options) {
this.data.lng = options.lng;
this.data.lat = options.lat;
console.log("这里是onload",this.data.lat,this.data.lng,options.place);
this.setData({
place:options.place
})
this.routeMap(this.data.lat,this.data.lng);
},
routeMap(latitude,longitude){
let that = this;
console.log("这里是routemap:",latitude,longitude);
qqMap.direction({
mode: 'driving',
to: {latitude,longitude},
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;
}
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log(pl)
that.setData({
latitude: pl[0].latitude,
longitude: pl[0].longitude,
markers:[{
iconPath:"../images/icon_location.png",
id:0,
longitude: longitude,
latitude: latitude,
width: 30,
height: 30,
}],
polyline: [{
points: pl,
color: "#20B2AA",
width: 4,
dottedLine: false
}]
})
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
});
}
})