uni-app 两个坐标点没有聚合
uni-app 两个坐标点没有聚合
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 19045.6216 | HBuilderX |
产品分类:uniapp/小程序/微信
PC开发环境操作系统:Windows
PC开发环境操作系统版本号:19045.6216
HBuilderX类型:正式
HBuilderX版本号:4.36
第三方开发者工具版本号:1.06
基础库版本号:1.0.0
项目创建方式:HBuilderX
### 示例代码:
```javascript
const instance = getCurrentInstance()
mapContext.value = uni.createMapContext("myMap",instance)
mapContext.value.initMarkerCluster({
enableDefaultStyle:false,
// gridSize:30,
success(res){
console.log(res,'聚合');
}
})
mapContext.value.on('markerClusterCreate',(e)=>{
// console.log("markerClusterCreate", e);
let clusterMarkers = []
const clusters = e.clusters // 新产生的聚合簇
clusters.forEach((cluster,index) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
let clusterObj = {
clusterId, //必须
...center,
width: 0,
height: 0,
iconPath: '/static/iconSvg/kong.png',
label: {// 定制聚合簇样式
content: markerIds.length + '家门店',
fontSize: 10,
color: '#fff',
width: 50,
height: 50,
bgColor: '#3687FC',
borderRadius: 25,
textAlign: 'center',
anchorX: -10,
anchorY: -35,
}
}
console.log(clusters);
clusterMarkers.push(clusterObj)
})
mapContext.value.addMarkers({
markers:clusterMarkers,
// clear:true,
})
})
const getAddressLowMarkers = (needCluster) => {
// if (markerCache.value.addressLow) return markerCache.value.addressLow;
const markers = address.value.map((p, i) => ({
id: Number(i) + 1000,
latitude: Number(p.latitude),
longitude: Number(p.longitude),
type: 'address',
joinCluster: needCluster, // 开启聚合
// #ifdef MP-WEIXIN
anchor: { x: 0.5, y: 0.3 },
// #endif
width: 50,
height: 50,
iconPath: "/static/iconSvg/beij.png",
label: {
// content: truncateMiddleAll(p.shopName, 5, 4, 0),
content:Number(i) + 1000,
color: '#fff',
fontSize: 10,
// #ifdef MP-WEIXIN
anchorX: p.shopName.length > 5 ? -20 : -(p.shopName.length * 5),
anchorY: model.value === 'ios' ? "-36rpx" : ""
// #endif
},
}));
// 过滤可见点后存入缓存
// const filtered = filterVisiblePoints(markers);
// markerCache.value.addressLow = filtered;
return markers;
};
操作步骤:
地图缩放部分两个坐标没有聚合效果
预期结果:
两个相邻的坐标点聚合
实际结果:
没有聚合
bug描述:
聚合方法在模拟器上显示没有问题,但是在真机上安卓有些坐标没有进行聚合,基本都是两个坐标点没有互相聚合,但是我缩放之后他俩可以和其他聚合点进行聚合,苹果手机没有这个问题。

更多关于uni-app 两个坐标点没有聚合的实战教程也可以访问 https://www.itying.com/category-93-b0.html
升级到最新的版本了,还是没有聚合,没有聚合的坐标都是俩个相邻的,部分两个相邻的聚合了,两个以上也都聚合了,只有安卓真机有这个问题,谢谢回复
回复 5***@qq.com: 测试一下原生微信小程序是否有这个问题
回复 DCloud_UNI_JBB: 原生的微信小程序开发者工具上没有这个问题
回复 5***@qq.com: 两边的代码保持一致了吗?
回复 DCloud_UNI_JBB: 是的
回复 5***@qq.com: im里面私聊发我一个可复现demo,我试试
从代码和描述来看,这是一个典型的uni-app地图聚合在Android真机上的兼容性问题。主要问题在于两个相邻坐标点未能正确聚合,但在缩放后能与其他点聚合。
可能原因及解决方案:
-
gridSize参数缺失
代码中gridSize:30被注释掉了。gridSize控制聚合的网格大小,建议明确设置:mapContext.value.initMarkerCluster({ enableDefaultStyle:false, gridSize: 30, // 取消注释并调整数值 success(res){ console.log(res,'聚合'); } }) -
坐标精度问题
Android设备对坐标精度更敏感,确保两个点的经纬度有足够差异:latitude: Number(Number(p.latitude).toFixed(6)), longitude: Number(Number(p.longitude).toFixed(6)), -
标记点ID冲突
检查所有标记点的ID是否唯一,重复ID可能导致聚合异常。 -
真机性能差异
Android设备性能参差不齐,可尝试:- 增加
gridSize值(如50) - 减少单次渲染的标记点数量
- 添加聚合延迟:
setTimeout(() => { mapContext.value.initMarkerCluster(...) }, 100) - 增加

