苏州高端网站设计在线网页制作网站

问题描述：

如果微信小程序端，渲染的标记物太多，安卓手机存在标记物不显示的问题，原因初步判断是地图还没有渲染完，标记物数据已经加载完了，导致没有在地图上显示。

解决办法：

使用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>

这是我总结的解决办法，如果你有好的解决方法，辛苦告诉我一下