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)可能无法正常触发。
建议的解决方案:
- 改用定时器轮询方式检查聚合状态:
let clusterTimer = setInterval(() => {
if(state.map && state.map.getMarkersCluster){
const clusters = state.map.getMarkersCluster()
if(clusters && clusters.length){
clearInterval(clusterTimer)
addClusterMarkers(clusters)
}
}
}, 300)
- 或者使用complete回调替代事件监听:
state.map.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 40,
complete(res) {
// 在这里处理聚合完成后的逻辑
addClusterMarkers(res.clusters)
}
});