1***@qq.com
1***@qq.com
  • 发布:2024-08-05 12:04
  • 更新:2024-08-05 12:04
  • 阅读:131

【报Bug】安卓点聚合样式bug

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.24

手机系统: Android

手机系统版本号: Android 14

手机厂商: 荣耀

手机机型: 荣耀60pro

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
                    enableDefaultStyle: false,  
                    zoomOnClick: true,  
                    gridSize: 50,  
                    complete: (res) => {  
                        console.log('initMarkerCluster', res)  
                        this.longitude = this.getMyPosition.lng  
                        this.latitude = this.getMyPosition.lat  
                        this.setMapCenter(this.longitude, this.latitude)  
                        this.getStationAll(this.latitude, this.longitude, true);  
                    }  
                });  
    this.mapContext.on("markerClusterCreate", (e) => {  
                            console.log("markerClusterCreate", e, scale);  
                            if (scale <= 14 && scale > 12) {  
                                this.setMapCluste(e)  
                            }  
                        });  

setMapCluste(e) {  
                let system = uni.getSystemInfoSync();  
                let isIos = system.osName == 'ios';  
                let clusterMarkers = [],  
                    ids = [];  
                const clusters = e.clusters; // 新产生的聚合簇  
                clusters.forEach((cluster, index) => {  
                    console.log('setMapCluste', cluster)  
                    const {  
                        center, // 聚合点的经纬度数组  
                        clusterId, // 聚合簇id  
                        markerIds // 已经聚合了的标记点id数组  
                    } = cluster;  
                    let clusterObj = {  
                        clusterId, //必须  
                        ...center,  
                        id: clusterId,  

                        joinCluster: false, // 注意:不加此项 自定义样式不显示,  
                        // iconPath: require('../../static/mapBg_old.png'),  
                        width: 20,  
                        height: 20,  
                        anchor: {  
                            x: 0,  
                            y: 0.8  
                        },  
                        label: {  
                            content: markerIds.length + '',  
                            borderRadius: 50,  
                            fontSize: 12,  
                            color: '#61ba2d',  
                            bgColor: '#ffffff',  
                            borderColor: '#61ba2d',  
                            borderWidth: 3,  
                            width: 30,  
                            height: 30,  
                            lineHeight: 30,  
                            textAlign: 'center',  
                            anchorX: isIos ? 0 : -5,  
                            anchorY: -32  
                        }  
                    };  
                    clusterMarkers.push(clusterObj);  
                });  
                // 添加聚合簇  
                //console.log('clusterMarkers', clusterMarkers)  
                this.clusterMarkersArr = ids;  
                this.mapContext.addMarkers({  
                    markers: clusterMarkers,  
                    clear: false //是否先清空地图上所有的marker  
                });  
            },

操作步骤:
                    enableDefaultStyle: false,  
                    zoomOnClick: true,  
                    gridSize: 50,  
                    complete: (res) => {  
                        console.log('initMarkerCluster', res)  
                        this.longitude = this.getMyPosition.lng  
                        this.latitude = this.getMyPosition.lat  
                        this.setMapCenter(this.longitude, this.latitude)  
                        this.getStationAll(this.latitude, this.longitude, true);  
                    }  
                });  
    this.mapContext.on("markerClusterCreate", (e) => {  
                            console.log("markerClusterCreate", e, scale);  
                            if (scale <= 14 && scale > 12) {  
                                this.setMapCluste(e)  
                            }  
                        });  

setMapCluste(e) {  
                let system = uni.getSystemInfoSync();  
                let isIos = system.osName == 'ios';  
                let clusterMarkers = [],  
                    ids = [];  
                const clusters = e.clusters; // 新产生的聚合簇  
                clusters.forEach((cluster, index) => {  
                    console.log('setMapCluste', cluster)  
                    const {  
                        center, // 聚合点的经纬度数组  
                        clusterId, // 聚合簇id  
                        markerIds // 已经聚合了的标记点id数组  
                    } = cluster;  
                    let clusterObj = {  
                        clusterId, //必须  
                        ...center,  
                        id: clusterId,  

                        joinCluster: false, // 注意:不加此项 自定义样式不显示,  
                        // iconPath: require('../../static/mapBg_old.png'),  
                        width: 20,  
                        height: 20,  
                        anchor: {  
                            x: 0,  
                            y: 0.8  
                        },  
                        label: {  
                            content: markerIds.length + '',  
                            borderRadius: 50,  
                            fontSize: 12,  
                            color: '#61ba2d',  
                            bgColor: '#ffffff',  
                            borderColor: '#61ba2d',  
                            borderWidth: 3,  
                            width: 30,  
                            height: 30,  
                            lineHeight: 30,  
                            textAlign: 'center',  
                            anchorX: isIos ? 0 : -5,  
                            anchorY: -32  
                        }  
                    };  
                    clusterMarkers.push(clusterObj);  
                });  
                // 添加聚合簇  
                //console.log('clusterMarkers', clusterMarkers)  
                this.clusterMarkersArr = ids;  
                this.mapContext.addMarkers({  
                    markers: clusterMarkers,  
                    clear: false //是否先清空地图上所有的marker  
                });  
            },

预期结果:

不展示默认聚合样式

实际结果:

先展示默认聚合样式后更新为自定义聚合样式,部分聚合点 自定义样式无法显示。

bug描述:

android nvue页面 动态渲染marker 点聚合会先显示蓝色默认样式 后更新为自定义样式

2024-08-05 12:04 负责人:无 分享
已邀请:

要回复问题请先登录注册