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;
}
},
- 发布:2023-11-09 10:48
- 更新:2023-11-09 10:48
- 阅读:208
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 21H2
HBuilderX类型: 正式
HBuilderX版本号: 3.6.18
第三方开发者工具版本号: 1.06.2301160
基础库版本号: 3.2.0
项目创建方式: HBuilderX
操作步骤:
预期结果:
marker自定义的label中应该会出现点聚合数量
marker自定义的label中应该会出现点聚合数量
实际结果:
ios中未出现
ios中未出现
bug描述:
微信开发者工具中运行截图,点聚合后右上角的label填充了内容显示
ios真机运行截图,只有label正常显示,但是填充内容消失