uni-app vue3中map实例的markerClusterCreate事件在真机中不会触发

uni-app vue3中map实例的markerClusterCreate事件在真机中不会触发

项目属性
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.57
第三方开发者工具版本号 1.06
基础库版本号 3.35
项目创建方式 HBuilderX

示例代码:

state.map.initMarkerCluster({  
    enableDefaultStyle: false,  
    zoomOnClick: true,  
    gridSize: 40,  
    complete(res) {  
        console.log('initMarkerCluster success')  
    }  
});  
state.map.on('markerClusterCreate', (e) => {  
    //真机不会触发  
    console.log(e)  
    addClusterMarkers(e)  
})

操作步骤:

state.map.initMarkerCluster({  
    enableDefaultStyle: false,  
    zoomOnClick: true,  
    gridSize: 40,  
    complete(res) {  
        console.log('initMarkerCluster success')  
    }  
});  
state.map.on('markerClusterCreate', (e) => {  
    //真机不会触发  
    console.log(e)  
    addClusterMarkers(e)  
})

预期结果:

真机中触发markerClusterCreate事件

实际结果:

真机中未触发markerClusterCreate事件

bug描述:

map使用点聚合功能,监听markerClusterCreate事件,在小程序开发者工具里可以触发该事件,但是在安卓真机中无法触发。苹果真机未测试


更多关于uni-app vue3中map实例的markerClusterCreate事件在真机中不会触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

方便发个复现demo吗

更多关于uni-app vue3中map实例的markerClusterCreate事件在真机中不会触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


重新调试了一下,是只有两个marker符合聚合条件的时候,真机上不会触发markerClusterCreate事件,当有3个marker符合聚合条件的时候才会触发。但是这个不是uniapp的问题,使用原生小程序调试的时候也是一样的。

这是一个已知的uni-app地图组件在真机环境下的兼容性问题。markerClusterCreate事件在部分真机环境(特别是Android)可能无法正常触发。

建议的解决方案:

  1. 改用定时器轮询方式检查聚合状态:
let clusterTimer = setInterval(() => {
    if(state.map && state.map.getMarkersCluster){
        const clusters = state.map.getMarkersCluster()
        if(clusters && clusters.length){
            clearInterval(clusterTimer)
            addClusterMarkers(clusters)
        }
    }
}, 300)
  1. 或者使用complete回调替代事件监听:
state.map.initMarkerCluster({  
    enableDefaultStyle: false,  
    zoomOnClick: true,  
    gridSize: 40,  
    complete(res) {  
        // 在这里处理聚合完成后的逻辑
        addClusterMarkers(res.clusters) 
    }  
});
回到顶部