定义两个标记点，通过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 pointsconst _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.lastLoginLngthis.requestLineRoutes();}}</script><style lang="less">page {height: 100%;}.mapLineWrapper {height: 100%;}</style> |
解决了没有？
也遇到了同样的问题