1***@qq.com
1***@qq.com
  • 发布:2023-11-09 10:48
  • 更新:2023-11-09 10:48
  • 阅读:149

【报Bug】Map组件使用点聚合功能,在ios平台marker的label内容不显示

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

第三方开发者工具版本号: 1.06.2301160

基础库版本号: 3.2.0

项目创建方式: HBuilderX

操作步骤:
        async getCompanyMapPoint(markersAll = []) {  

                this.companyMapPointQuery.deptId = this.currentDeptId  
                this.companyMapPointQuery.speciesId = this.speciesId  
                const res = await companyMapPoint(this.companyMapPointQuery);  
                let iconPath = '/static/images/marker.png'  
                if(this.companyMapPointQuery.queryType !== "YZZT"){  
                    iconPath = '/static/images/resource/fish.png'  
                }  
                let markers = res.data.map(item => {  
                    const [lng, lat] = item.location.split(',');  
                    return {  
                        id: item.id,  
                        latitude: lat,  
                        longitude: lng,  
                        width: 30,  
                        height: 30,  
                        joinCluster: true, // 指定了该参数才会参与聚合  
                        iconPath  
                    };  
                });  
                markersAll = markersAll.concat(markers)  
                if (res.data.length == this.companyMapPointQuery.pageSize) {  
                    this.companyMapPointQuery.pageNum += 1  
                    this.getCompanyMapPoint(markers)  
                } else {  
                    switch (uni.getSystemInfoSync().platform) {  
                        case 'android':  
                            this.mapCtx.addMarkers({  
                                markers: markersAll,  
                                clear: true  
                            })  
                            break;  
                        case 'ios':  
                            this.markers = []  
                            this.markers = markersAll  
                            break;  
                        default:  
                            this.mapCtx.addMarkers({  
                                markers: markersAll,  
                                clear: true  
                            })  
                            break;  
                    }  
                }  
                // this.mapCtx.includePoints({  
                //  points: this.markerIds,  
                //  padding: [20, 20, 20, 20]  
                // });  
            },  
            // 聚合簇点击  
            markerClusterClick(res) {},  
            // 聚合簇形成  
            markerClusterCreate(res) {  
                const clusters = res.clusters // 新产生的聚合簇  
                let iconPath = '/static/images/marker.png'  
                if(this.companyMapPointQuery.queryType !== "YZZT"){  
                    iconPath = '/static/images/resource/fishs.png'  
                }  
                const markers = clusters.map(cluster => {  
                    let {  
                        center, // 聚合点的经纬度数组  
                        clusterId, // 聚合簇id  
                        markerIds // 已经聚合了的标记点id数组  
                    } = cluster  
                    console.log("markerIds", markerIds.length);  
                    return {  
                        ...center,  
                        width: 50,  
                        height: 50,  
                        clusterId, // 必须  
                        iconPath,  
                        borderRadius: 8,  
                        joinCluster: true,  
                        // callout: {  
                        //  bgColor: "#5AC2EB",  
                        //  color: "#fff",  
                        //  content: markerIds.length,  
                        //  display: "ALWAYS",  
                        //  fontSize: "14",  
                        //  fontWeight: "bold",  
                        //  padding: 8,  
                        //  textAlign: "center"  
                        // },  
                        label: { // 定制聚合点样式  
                            content: markerIds.length,  
                            fontSize: 14,  
                            width: 18,  
                            height: 18,  
                            color: '#ffffff',  
                            bgColor: '#C2874D',  
                            borderRadius: 6,  
                            textAlign: 'center',  
                            anchorX: 25,  
                            anchorY: -60,  
                        }  
                    }  
                })  

                switch (uni.getSystemInfoSync().platform) {  
                    case 'android':  
                        // 添加聚合簇  
                        this.mapCtx.addMarkers({  
                            markers,  
                            clear: false, //是否先清空地图上所有的marker  
                        })  
                        break;  
                    case 'ios':  
                        this.markers = this.markers.concat(markers)   
                        break;  
                    default:  
                        // 添加聚合簇  
                        this.mapCtx.addMarkers({  
                            markers,  
                            clear: false, //是否先清空地图上所有的marker  
                        })  
                        break;  
                }  
            },

预期结果:

marker自定义的label中应该会出现点聚合数量

实际结果:

ios中未出现

bug描述:

微信开发者工具中运行截图,点聚合后右上角的label填充了内容显示

ios真机运行截图,只有label正常显示,但是填充内容消失

2023-11-09 10:48 负责人:无 分享
已邀请:

要回复问题请先登录注册