map的自定义点聚合簇效果到底该咋实现，初始化配置项initMarkerCluster里面有啥配置项
T_T无辜的程序
- 发布：2022-03-11 18:28
- 更新：2023-08-15 09:36
- 阅读：2205
后续补充文档对参数的说明
属性 类型 默认值 必填 说明
enableDefaultStyle boolean true 否 启用默认的聚合样式
zoomOnClick boolean true 否 点击已经聚合的标记点时是否实现聚合分离
gridSize boolean 60 否 聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，以像素为单位
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
参考文档 https://uniapp.dcloud.net.cn/api/location/map.html
<template>
<view class="content">
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
</view>
</template>
<script>
const img = '/static/logo.png';
export default {
data() {
return {
latitude: 23.099994,
longitude: 113.324520,
}
},
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", (e) => {
console.log("markerClusterCreate", e);
});
this.addMarkers();
},
methods: {
addMarkers() {
const marker = {
id: 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
};
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) => {
const newMarker = Object.assign(marker, p)
newMarker.id = i + 1
newMarker.label.content = `label ${i + 1}`
markers.push(newMarker)
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
flex: 1;
}
</style>
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
uni-app 实现Map地图聚合功能，可自定义聚合图标样式：https://ask.dcloud.net.cn/article/39689
首先需要理解一点聚合簇也是marker的一种，他的样式是通过 lable 实现的，自定义聚合样式方法：
- enableDefaultStyle 设置为 false
- 在 markerClusterCreate 事件中会返回聚合簇marker的集合，然后修改聚合簇marker 的 label 参数自定义样式
- 在调用 addMarkers 方法，添加修改后的聚合簇marker；
具体逻辑可以参考微信小程序给的示例工程，uniapp 中逻辑和微信小程序中的一样
T_T无辜的程序 (作者)
谢谢回答，还有一个问题一直在困扰，我把enableDefaultStyle设置为false，该怎么去自定义样式，设置为true，它就是一个蓝底的圈吗
2022-03-14 09:30
T_T无辜的程序 (作者)
如果想自定义聚合样式，该如何操作
2022-03-14 09:33
T_T无辜的程序 (作者)
目前聚合已经实现，只是样式问题一直未解决
2022-03-14 09:34