问题描述:
如果小程序>微信小程序端,渲染的标记物太多,安卓手机存在标记物不显示的问题,原因初步判断是地图还没有渲染完,标记物数据已经加载完了,导致没有在地图上显示。
解决办法:
使用map组件的bindupdated="onUpdated"方法监听地图渲染完成,这个时候,再去渲染标记物,而且还得多次渲染,如果覆盖物图片多了,一次还不够。所以我遍历了5次
// 监听地图渲染完成onUpdated(e) {console.log('onRegionChange', e)for (let i = 0; i < 5; i++) {this.timer = setTimeout(() => {let markers = this.data.markersthis.setData({coverMarkers: markers});}, 1000 * i)}},
但是,千万注意,map上的标记物变量,不要自定义标记物变量使用同一个,否则你每次更新【自定义标记物变量】,就会导致onUpdated再次被触发,进入死循环,所以,这两个字段,虽然值一样,但是要分成两个,例如:
data: {markers: [],//地图标记coverMarkers: [],//覆盖物标记currentLocation: {latitude: '',longitude: ''},scale: 16 // 添加缩放级别},
最后,地图标记坐标+自定义标记物:
<map id="map" longitude="{{currentLocation.longitude}}" latitude="{{currentLocation.latitude}}" scale="{{scale}}"markers="{{markers}}" show-location bindupdated="onUpdated"bindcallouttap="handleCalloutTap" style="width: 100%; height: 300px;"><view slot="callout"><cover-view wx:for="{{coverMarkers}}" wx:key="id"><cover-view class="marker-container" marker-id="{{item.id}}" wx:if="{{item.customCallout}}"><cover-view class="customCallout" style="background: {{item.bgColor}}"><map-callout marker="{{item}}"/></cover-view></cover-view></cover-view></view></map>
这是我总结的解决办法,如果你有好的解决方法,辛苦告诉我一下