功能介绍：

本文记录了百度地图BMap实现点聚合效果。如下图实例：
地图缩小时聚合效果：
在这里插入图片描述

地图放大后显示效果：
在这里插入图片描述

整体思路：

使用html和JavaScript语言实现；
使用百度地图cdn实现；

遇到问题：

之前大多是使用百度地图vue版本的，好几年没用过这种写法了，查看百度地图api都是 JavaScript API GL，实例对象名称为new BMapGL，不符合我的要求，有知道的小伙伴麻烦回复我一下，不胜感谢。

具体实现：

一、cdn引用：

<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>