百度地图实现点聚合并修改点聚合的样式

1、引入百度地图API

<script type="text/javascript" src="//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>

2、简单使用（这里直接贴的百度示例）

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	map.enableScrollWheelZoom();


	var MAX = 10;
	var markers = [];
	var pt = null;
	var i = 0;
	for (; i < MAX; i++) {
	   pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
	   markers.push(new BMap.Marker(pt));
	}
	//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
	var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
</script>

3、自定义点聚合样式

点聚合从小到大分为五个级别，每个级别都是使用图片作为背景，因此传入对应的数据即可正常展示

var polymerizationStyles = [
      {
          url: 'imgs/m0.png',//图片路径
          size: new BMap.Size(53, 52),//大小
          textColor: '#FFFFFF'//字体颜色
      },
      {
          url: 'imgs/m1.png',
          size: new BMap.Size(56, 55),
          textColor: '#FFFFFF'
      },
      {
          url: 'imgs/m2.png',
          size: new BMap.Size(66, 65),
          textColor: '#FFFFFF'
      },
      {
          url: 'imgs/m3.png',
          size: new BMap.Size(78, 77),
          textColor: '#FFFFFF'
      },
      {
          url: 'imgs/m4.png',
          size: new BMap.Size(90, 89),
          textColor: '#FFFFFF'
      }
  ];
  markerClusterer.setMinClusterSize(5);//设置超过几个点开始聚合
  markerClusterer.setStyles(polymerizationStyles);//调用样式

4、清除点聚合

markerClusterer.clearMarkers();

5、百度点聚合Api

api.map.baidu.com/library/Mar…