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

8 回复

hx升级到最新版试试还有没有问题

更多关于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真机上的兼容性问题。主要问题在于两个相邻坐标点未能正确聚合,但在缩放后能与其他点聚合。

可能原因及解决方案:

  1. gridSize参数缺失
    代码中gridSize:30被注释掉了。gridSize控制聚合的网格大小,建议明确设置:

    mapContext.value.initMarkerCluster({  
        enableDefaultStyle:false,  
        gridSize: 30, // 取消注释并调整数值
        success(res){  
            console.log(res,'聚合');  
        }  
    })
    
  2. 坐标精度问题
    Android设备对坐标精度更敏感,确保两个点的经纬度有足够差异:

    latitude: Number(Number(p.latitude).toFixed(6)),
    longitude: Number(Number(p.longitude).toFixed(6)),
    
  3. 标记点ID冲突
    检查所有标记点的ID是否唯一,重复ID可能导致聚合异常。

  4. 真机性能差异
    Android设备性能参差不齐,可尝试:

    • 增加gridSize值(如50)
    • 减少单次渲染的标记点数量
    • 添加聚合延迟:
    setTimeout(() => {
        mapContext.value.initMarkerCluster(...)
    }, 100)
回到顶部