功能介绍:

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

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

整体思路:

  1. 使用html和JavaScript语言实现;
  2. 使用百度地图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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐