效果如图：
一、什么是点聚合
当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。
点聚合官网教程
二、基本用法
- template
<map id="map" :latitude="latitude" :longitude="longitude" :style="{ width: '100%', height: windowHeight + 'px' }" :scale="10">
- onReady
// 获取屏幕高度
uni.getSystemInfo({
success: (res) => {
this.windowHeight = res.windowHeight;
},
});
// 创建map对象
this._mapContext = uni.createMapContext("map", this);
this.cluster();
- data
_mapContext: null,
windowHeight: 0,
latitude: 23.099994,
longitude: 113.324520,
- methods
// 点聚合
cluster() {
// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否使用默认样式
zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别
gridSize: 60, // 聚合计算时网格的像素大小，默认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, // 必须
label: {
content: markerIds.length + '',
fontSize: 16,
width: 50,
height: 50,
bgColor: '#00A3FA',
borderRadius: 25,
textAlign: 'center',
anchorX: 0,
anchorY: -20,
}
}
})
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('clusterCreate addMarkers', res)
}
})
});
this._mapContext.on('markerClusterClick', (res) => {
console.log('markerClusterClick', res)
})
this.addMarkers();
},
// 添加标记点
addMarkers() {
const positions = [
{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}
]
const markers = []
positions.forEach((p, i) => {
markers.push(
Object.assign({}, {
id: i + 1,
iconPath: "/static/images/map0.png",
width: 28,
height: 29,
joinCluster: true, // 指定了该参数才会参与聚合
callout:{
bgColor: "#5AC2EB",
color: "#fff",
content: "客户名称",
display: "ALWAYS",
fontSize: "14",
fontWeight: "bold",
padding: 8,
textAlign: "center"
}
}, p)
)
})
console.log('markers', markers)
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
},
三、踩坑总结
1. 调用initMarkerCluster方法，否则不生效
// 创建map对象
this._mapContext = uni.createMapContext("map", this);
// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否使用默认样式
zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别
gridSize: 60, // 聚合计算时网格的像素大小，默认60
complete(res) {
console.log('initMarkerCluster', res)
}
});
2. joinCluster属性设为true，否则不生效
marker对象上必须有该属性
3. 确保每个marker有唯一的id，否则可能会出问题
文章来源：https://www.toymoban.com/news/detail-656168.html
4. 安卓和ios兼容问题
1. iconPath不要有中文，安卓和微信小程序可以使用中文,但苹果端使用中文要出异常,所以统一不要使用中文
2.小程序–安卓端直接传入marker数组无法使用点聚合的效果. 小程序–苹果端通过调用addMarkers无法使用点聚合的效果. 因此,此处必须写兼容代码分别处理
- 安卓
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
- ios
<map id="map" :latitude="latitude" :longitude="longitude" :style="{ width: '100%', height: windowHeight + 'px' }" :scale="10" markers="markerList">
文章来源地址https://www.toymoban.com/news/detail-656168.html
到了这里，关于uniapp中map使用点聚合渲染marker覆盖物的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
