function myMarkerClusterer(
{ map, // 地图实例(必传)
BMap, // 地图方法(必传)
BMapLib, // 地图方法(必传)
markerImg, // marker的图片(必传)
markerImgJU, // 聚合后的图片(必传)
markerData, // 所有点位的数据(必传)
markerSize = new BMap.Size(24, 32), // marker的size
markerAnchor = new BMap.Size(15, 55), // marker的偏移度
labelOffset = new BMap.Size(5, -35), // label的偏移度
labelStyle = { // label的样式
color: '#fff',
backgroundColor: 'rgba(254,127,42)',
borderRadius: '2px',
padding: '0 10px',
fontSize: '12px',
lineHeight: '20px',
border: '0',
transform: 'translateX(-50%)'
},
markerClustererStyle = [// 聚合后的样式
{
url: markerImgJU,
size: new BMap.Size(33, 47),
anchor: new BMap.Size(6, 0.1),
textColor: '#fff'
}
],
markerClickFuction = function (e) { // marker点击方法
console.log(e)
},
markerClickArgument = 'name', // marker点击获取的参数
hasLabel = true
} = {}
) {
let ptMarker = null// 转换格式后的marker点位
const markers = []// 所有的marker
const markerIcon = new BMap.Icon(markerImg, markerSize, { // marker图标及样式
anchor: markerAnchor
})
for (let i = 0; i < markerData.length; i++) {
ptMarker = new BMap.Point(markerData[i].lng, markerData[i].lat)// 将传入的数据转换为需要的点位格式
// 以下是marker的代码
const marker = new BMap.Marker(ptMarker, { // marker
icon: markerIcon
})
if (hasLabel) {
// 以下是label的代码
const label = new BMap.Label(markerData[i].name, { // label
position: ptMarker, // 指定文本标注所在的地理位置
offset: labelOffset // 设置文本偏移量
})
label.setStyle(labelStyle)// 设置label样式
marker.setLabel(label)// 将label绑定到marker上
}
marker[markerClickArgument] = markerData[i][markerClickArgument]// marker点击所需要的参数
marker.addEventListener('click', markerClickFuction)// marker点击事件
map.addOverlay(marker)// 将marker渲染到地图上
markers.push(marker)// 收集所有的marker以便聚合
}
// 最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
const markerClusterer = new BMapLib.MarkerClusterer(map, { // 聚合后的markerClusterer
markers
})
markerClusterer.setStyles(markerClustererStyle)// 设置聚合样式(可以按照层级设置多种)
return {
markers,
markerClusterer
}
}
export default myMarkerClusterer
百度地图点位渲染及点位聚合封装的方法
最新推荐文章于 2024-06-27 16:23:14 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)