微信小程序地图标记点,安卓手机一次性渲染不出来的问题

走进大山的孩子2025-02-16 17:48

问题描述：

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

解决办法：

使用map组件的bindupdated="onUpdated"方法监听地图渲染完成，这个时候，再去渲染标记物，而且还得多次渲染，如果覆盖物图片多了，一次还不够。所以我遍历了5次

javascript 复制代码

// 监听地图渲染完成
    onUpdated(e) {
        console.log('onRegionChange', e)
        for (let i = 0; i < 5; i++) {
            this.timer = setTimeout(() => {
                let markers = this.data.markers
                this.setData({
                    coverMarkers: markers
                });
            }, 1000 * i)
        }
    },

但是，千万注意，map上的标记物变量，不要自定义标记物变量使用同一个，否则你每次更新【自定义标记物变量】，就会导致onUpdated再次被触发，进入死循环，所以，这两个字段，虽然值一样，但是要分成两个，例如：

javascript 复制代码

data: {
        markers: [],//地图标记
        coverMarkers: [],//覆盖物标记
        currentLocation: {
            latitude: '',
            longitude: ''
        },
        scale: 16  // 添加缩放级别
    },

最后，地图标记坐标+自定义标记物：

javascript 复制代码

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

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