4***@qq.com
4***@qq.com
  • 发布:2022-08-03 15:49
  • 更新:2023-11-07 23:12
  • 阅读:957

uniapp nvue map组件点聚合自定义样式,安卓app端点聚合无限增加

分类:uni-app
map

uniapp nvue map组件点聚合自定义样式,安卓app端的点聚合无限增加,并且也没有自定义的样式

onReady() {  

            this._mapContext = uni.createMapContext("map", this);  

            // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})    
            this._mapContext.initMarkerCluster({  
                enableDefaultStyle: false, // 是否使用默认聚合样式    
                zoomOnClick: true,  
                gridSize: 60,  
                complete(res) {  
                    console.log('initMarkerCluster', res)  
                }  
            });  

            this._mapContext.on("markerClusterCreate", (res) => {  
                                // 此处无限循环  
                console.log("markerClusterCreate", res);  
                const clusters = res.clusters  
                const markers = clusters.map(cluster => {  
                    const {  
                        center,  
                        clusterId,  
                        markerIds  
                    } = cluster  
                    return {  
                        ...center,  
                        width: 0,  
                        height: 0,  
                        clusterId,  
                        joinCluster: true, //核心代码,没有这个自定义样式就不会生效  
                        iconPath: '/static/common/station.png',  
                        label: {  
                            content: markerIds.length + '',  
                            fontSize: 16,  
                            color: '#fff',  
                            width: 50,  
                            height: 50,  
                            bgColor: '#00868C',  
                            borderRadius: 25,  
                            textAlign: 'center',  
                            anchorX: -25,  
                            // anchorY: -50,  
                        }  
                    }  
                })  
                this._mapContext.addMarkers({  
                    markers,  
                    clear: false,  
                    complete(res) {  
                        console.log('clusterCreate addMarkers', res)  
                    }  
                })  
                this.markers.concat(markers)  
                console.log(markers)  
            })  
}
2022-08-03 15:49 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

  • 4***@qq.com (作者)

    代码是参考另一位官方提供的修改点聚合样式的代码:https://ask.dcloud.net.cn/question/149683

    2022-08-04 10:46

  • 4***@qq.com (作者)

    是vue2,附件已上传,包含复现视频以及测试代码

    2022-08-04 10:51

  • DCloud_UNI_Anne

    回复 4***@qq.com: 未复现你的问题,请提供可直接运行的最小化复现示例(上传附件)

    2022-08-04 12:02

  • 4***@qq.com (作者)

    回复 DCloud_UNI_Anne: 已经上传测试项目压缩包,解压后可以运行到安卓手机查看,apk包超出附件上传大小限制。问题复现:点聚合直接不显示,或是一直无限循环增加

    2022-08-04 14:00

  • 4***@qq.com (作者)

    回复 DCloud_UNI_Anne: 请问可以复现吗,是否在处理中呢

    2022-08-08 13:38

Geewoo_c

Geewoo_c

你好,这个问题你解决了么

  • 4***@qq.com (作者)

    没有,官方没有回复了

    2022-08-18 10:45

  • Geewoo_c

    回复 4***@qq.com: 裂开,我也遇到这个问题了,查了很多代码,你是唯一一个和我相似, 在返回新创建的聚合簇信息 const clusters = res.clusters ,我看网上代码都是直接赋值的,我很好奇,取值怎么取的,郁闷。

    2022-08-18 10:50

5***@qq.com

5***@qq.com

请问你是直接用的nvue页面还是subNvue页面引入的nvue页面?我用引入的,点聚合 this._mapContext.on("markerClusterCreate", (res) => { 根本没有回调

  • 2***@qq.com

    你解决了吗 我也这个问题

    2023-04-01 21:40

1***@qq.com

1***@qq.com

我晕,我也遇到了,一毛一样,nvue不能自定义样式 而且一直无限增加

1***@163.com

1***@163.com

joinCluster: true, //核心代码,没有这个自定义样式就不会生效

这句代码不要试试

余声

余声

运行测试代码后(3.8.12.20230817) 发现这个属性会造成你所说的问题。不知道是不是主要原因。
joinCluster:是否参与聚合簇

  1. joinCluster:false 不参与聚合时代码正常,可以正常合并,样式也是正常。

  2. joingCluster: true 重复生成聚合簇,造成死循环,样式也不生效。

  3. 偶发性的不显示mark 点。不知道什么原因。

2***@qq.com

2***@qq.com

我也遇到了 一模一样,我要从res取值,而且一直递归无限增加, nvue页面

  • while

    请问解决了吗,都是多次触发markerClusterCreate方法,无限渲染

    2024-03-20 09:56

  • while

    回复 while: 实测把joinCluster: true属性删掉就行了,但是缩放时聚合样式一闪一闪的,有好的解决办法吗

    2024-03-20 10:00

要回复问题请先登录注册