微信小程序,腾讯地图polyline不显示轨迹
template
<template>
<view class="leven">
<view class="map-box">
<view class="map_title" data-type="start">
起点:
<input type="text" placeholder="选择起点" @click="getAddress($event)" :value="start" disabled />
<view class="float-box" :hidden="floatShow">
<view class="float" data-type="start_mine" @click="setMyLocation($event)">我的位置</view>
<view class="float" data-type="start_choose" @click="setMyLocation($event)">选择位置</view>
</view>
</view>
<view class="map_title" @click="setMyLocation($event)" data-type="end">
终点:
<input type="text" placeholder="选择终点" :value="end" disabled />
</view>
<view class="map-body">
<map id="myMap"
:markers="markers"
:longitude="startLongitude"
:latitude="startLatitude"
:polyline="polyline"
class="leven-map"
scale='16'
show-location
style="width: 100%; height: 100%;"
/>
</view>
<view class="map-footer">
<view class="map-foot">距离:{{ distance }}米</view>
<view class="map-foot">价格:元</view>
</view>
</view>
</view>
</template>
script
<script>
import QQMapWX from '../../static/js/qqmap-wx-jssdk.min.js';
export default {
data() {
return {
startLongitude: 0,
startLatitude: 0,
floatShow: true,
markers: [],
start: '',
end: ''
};
},
onLoad() {
// 实例化API核心类
},
onReady() {
this.mapCtx = uni.createMapContext('myMap');
this.moveToLocation();
},
methods: {
setPolyline: function() {
wx.request();
},
setMyLocation: function(e) {
console.log(e.currentTarget.dataset.type);
let type = e.currentTarget.dataset.type;
if (type == 'start_mine') {
this.getCenterLocation(this.setMarker);
this.start = '我的位置';
} else {
this.chooseLocation(type);
this.floatShow = true;
}
},
setMarker: function(id, obj) {
if (id == 1) {
this.markers[0] = {
iconPath: '../../static/images/1.png',
id: 0,
latitude: obj.latitude,
longitude: obj.longitude,
width: 28,
height: 32,
zIndex: 10000
};
if (this.markers.length > 1 && this.markers[0] != null) {
this.formSubmit();
}
} else if (id == 2) {
this.markers[1] = {
iconPath: '../../static/images/2.png',
id: 1,
latitude: obj.latitude,
longitude: obj.longitude,
width: 28,
height: 32,
zIndex: 10000
};
if (this.markers.length > 1 && this.markers[0] != null) {
this.formSubmit();
}
} else {
this.markers[0] = {
iconPath: '../../static/images/1.png',
id: 0,
latitude: this.startLatitude,
longitude: this.startLongitude,
width: 28,
height: 32,
zIndex: 10000
};
this.floatShow = true;
console.log(this.markers);
if (this.markers.length > 1 && this.markers[0] != null) {
this.formSubmit();
}
}
},
formSubmit(e) {
var _this = this;
//调用距离计算接口
var qqmapsdk = new QQMapWX({
key: 'BLPBZ-EM7LF-5M3J5-N6ED6-BAIKH-BBBJJ'
});
console.log(qqmapsdk);
qqmapsdk.direction({
mode: 'driving', //可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
//from参数不填默认当前地址
from: {
latitude: this.markers[0].latitude,
longitude: this.markers[0].longitude
},
to: {
latitude: this.markers[1].latitude,
longitude: this.markers[1].longitude
},
success: function(res) {
console.log('-------------返回结果---------');
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('-------polyline-----');
console.log(pl);
//设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
_this.startLatitude = pl[0].latitude;
_this.startLongitude = pl[0].longitude;
_this.polyline = [
{
points: pl,
color: '#FF0000DD',
width: 4
}
];
console.log(_this.polyline)
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
},
chooseLocation: function(type) {
var that = this;
uni.chooseLocation({
success: function(res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
let obj = {
latitude: res.latitude,
longitude: res.longitude
};
if (type == 'end') {
that.end = res.name;
console.log(type);
that.setMarker(2, obj);
} else {
that.start = res.name;
console.log(type);
that.setMarker(1, obj);
}
}
});
},
getAddress: function() {
this.floatShow = !this.floatShow;
},
getCenterLocation: function(callback) {
var that = this;
this.mapCtx.getCenterLocation({
success: function(res) {
console.log(res);
that.startLongitude = res.longitude;
that.startLatitude = res.latitude;
callback();
}
});
},
moveToLocation: function() {
console.log(111);
this.mapCtx.moveToLocation();
},
translateMarker: function() {
this.mapCtx.translateMarker({
markerId: 0,
autoRotate: true,
duration: 1000,
destination: {
latitude: 23.10229,
longitude: 113.3345211
},
animationEnd() {
console.log('animation end');
}
});
},
includePoints: function() {
this.mapCtx.includePoints({
padding: [10],
points: [
{
latitude: 23.10229,
longitude: 113.3345211
},
{
latitude: 23.00229,
longitude: 113.3345211
}
]
});
}
},
c
};
</script>
style
<style>
.map-box {
display: flex;
flex-direction: column;
height: 100vh;
width: 750rpx;
box-sizing: border-box;
}
.float-box {
border-top: 1rpx solid #c0c0c0;
margin-left: -50rpx;
width: 100%;
position: absolute;
bottom: 0;
transform: translateY(100%);
background-color: #fff;
z-index: 999999999999999999;
}
.float {
border-top: 1rpx solid #f0f0f0;
padding-left: 150rpx;
}
.map-body {
flex: auto;
width: 750rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.leven-map {
width: 100vw;
flex: auto;
}
.map_title {
display: flex;
height: 80rpx;
line-height: 80rpx;
padding: 0 50rpx;
align-items: center;
position: relative;
}
.map_title > input {
line-height: 80rpx;
flex: auto;
}
.map-foot {
padding: 20rpx 50rpx;
}
</style>
0 个回复