微信小程序路线规划，安卓中地图组件未正确展示
定义两个标记点，通过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[代码][代码]>[代码]
