本文记录了百度地图BMap实现点聚合效果。如下图实例：
地图缩小时聚合效果：
地图放大后显示效果：
之前大多是使用百度地图vue版本的，好几年没用过这种写法了，查看百度地图api都是 JavaScript API GL，实例对象名称为new BMapGL，不符合我的要求，有知道的小伙伴麻烦回复我一下，不胜感谢。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript"
src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<body>
<div id="map" style="width: 1200px;height: 800px;"></div>
</body>
<script>
// 存放全部的经纬度数据列表
const data = [
{
long: "107.1",
lat: "36.2",
}
...
];
// 创建地图实例
const map = new BMap.Map('map');
// 配置中心点坐标
const center = new BMap.Point(106.5, 35.8);
// 设定地图的中心点坐标和缩放值
map.centerAndZoom(center, 5);
// 启用滚轮放大缩小功能
map.enableScrollWheelZoom(true);
// 遍历坐标点
const markers = data.map(item => {
// 坐标点经纬度
const point = new BMap.Point(item.long, item.lat);
return new BMap.Marker(point);
});
// 添加点聚合效果
let markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
</script>
上面截图中显示的图标为百度地图默认图标，实际开发中需要修改为自定义图片。
<script>
// 遍历坐标点
const markers = data.map(item => {
// 坐标点经纬度
const point = new BMap.Point(item.long, item.lat);
// 配置放大后单个点的自定义图标
const myIcon = new BMap.Icon('放大后单个点的图片地址', new BMap.Size(20, 20));
// 设置图标大小
myIcon.setImageSize(new BMap.Size(20, 20))
return new BMap.Marker(point, {icon: myIcon});
});
// 添加点聚合效果
let markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
// 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
minClusterSize: 2,
styles: [{
url: '点聚合时自定义图片地址',
size: new BMap.Size(42, 42)
}]
});
</script>