百度地图自定义图标点聚合实现与注意事项

1、前因

往往需要用到地图的时候设计都不会使用百度地图自带的覆盖物样式，而是需要我们自己去制作或设计，在上一篇文章中描写了怎么添加与删除自定义覆盖物。（https://blog.csdn.net/weixin_44849078/article/details/89362561）
但是之后想要对自定义覆盖物使用点聚合时却发现不支持，会报错。无奈之下到处看demo，终于找到了曲线救国的方式。

百度地图默认样式

自定义样式

2、实现代码

上篇文章中用的是ComplexCustomOverlay来生成自定义覆盖物，这里为了点聚合回到了Marker方法，用的依然是vue。
引入js文件

<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

类参考：http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbols/BMapLib.MarkerClusterer.html

// 调用该方法后创建覆盖物
addMapDeviceMarker (deviceObj) {
      // 创建地图点
      var pt = new BMap.Point(deviceObj.lat, deviceObj.lng);
      // 创建自定义图标对象
      var myIcon = new BMap.Icon('../../../static/img/patrol.png', new BMap.Size(43, 55));
      var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
      this.map.addOverlay(marker);
      deviceObj.mapMarker = marker;
      
      // 将覆盖物添加到集合中
      this.markerList.push(marker);
}

点聚合方法调用。

var markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: this.markerList});

最后效果

3、使用了点聚合后要注意的问题

点聚合使用后会有很多改变，之前使用的一些方法会无效，需要另外设置。具体操作以后再写，这里提示一下。

3.1、缩放或移动地图后点的文本标注会消失

使用BMap.Label添加的文本标注会消失，每次变动后需要重新添加文本标注。

3.2、缩放或移动地图后信息窗口会关闭，需要重新打开

3.3、添加删除方法的改变

不再使用addOverlay与removeOverlay进行添加与删除操作，需要用markerClusterer里的方法。