收藏
回答

微信小程序路线规划,安卓中地图组件未正确展示

问题模块
API和组件


定义两个标记点,通过api获得路线规划坐标点,转换为polyline格式再将map组件显示。

复现方式:

   测试了多台安卓机,每次进入页面加载地图组件时,会出现如上两种图片展示情况,一种是正常展示, 一种是缩放视野以包含所有给定的坐标点,以两标记点中心位置放大展示,需手动缩小地图才能看到路线规划,出现概率大于50%。

   


如调用方式有问题,请指正谢谢。




正确展示:

异常展示:



实现代码如下:

<template>
<view class="mapLineWrapper">
<map wx:if="{{map}}" id="map" polyline="{{polyline}}" markers="{{markers}}" include-points="{{markers}}" style="width: 100%; height: 100%;"></map>
</view>
</template>
<script>
import wepy from 'wepy'
  
export default class gps extends wepy.page {
data = {
originLat: '',
originLong: '',
desLat: '',
desLong: '',
markers: [],
polyline: [],
map: false,
config: null
}
requestLineRoutes () {
// 经纬度解压
const _coorsDescompression = data => {
let coors = data;
for (var i = 2; i < coors.length ; i++) {
coors[i] = coors[i-2] + coors[i]/1000000
}
return coors;
}
  
// 转换经纬度为polyline points
const _transformPoints = coors => {
let points = [];
for (var i = 0; i < coors.length; i = i + 2) {
points[i / 2] = { latitude: coors[i], longitude:coors[i+1] }
}
return points;
}
  
const that = this;
wx.request({
url: "https://apis.map.qq.com/ws/direction/v1/driving/",
header: {
'content-type': 'application/json'
},
data: {
from: this.originLat + ',' + this.originLong,
to: this.desLat + ',' + this.desLong,
policy: 'REAL_TRAFFIC',
key: 'xxxx',
},
success: function(res) {
const coors = _coorsDescompression(res.data.result.routes[0].polyline);
const points = _transformPoints(coors);
that.markers = [{
iconPath: "/images/icon/start.png",
latitude: that.originLat,
longitude: that.originLong,
width: 24,
height: 31
},{
iconPath: "/images/icon/end.png",
latitude: that.desLat,
longitude: that.desLong,
width: 24,
height: 31
}];
  
that.polyline = [{
points: points,
color: "#00b91e",
borderColor: "#0b7117",
borderWidth: 1,
width: 8,
dottedLine: false,
arrowLine: true,
}];
that.map = true;
that.$apply();
wx.hideLoading && wx.hideLoading();
}
})
}
  
async onLoad (opts) {
wx.showLoading && wx.showLoading({title: '加载中'});
const res = storage.origingps.get();
this.originLat = res.latitude;
this.originLong = res.longitude;
this.desLat = opts.lastLoginLat;
this.desLong = opts.lastLoginLng
this.requestLineRoutes();
}
}
</script>
<style lang="less">
page {
height: 100%;
}
.mapLineWrapper {
height: 100%;
}
</style>


最后一次编辑于  2017-08-31  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 王冲
    王冲
    2017-11-14

    也遇到了同样的问题

    2017-11-14
    赞同
    回复
  • 岸边的旅行者
    岸边的旅行者
    2018-11-16

    解决了没有?

    2018-11-16
    赞同
    回复