高德地图的点聚合效果下的点的添加和删除

• 点聚合实现

最近做项目一直在和高德地图打交道。。。坑坑坑

打点一旦多，对于密集恐惧症的人来说就是一场灾难，所以官方给出了解决方案---点聚合。

在地图打点就这样轻松实现

marker = new AMap.Marker({
    map: map,
    position: position,
    icon: icon_style
});

markers作为存放所有点的集合，每创建一个marker，就把它装进markers中

var markers = [];
markers.push(marker);

最后调用一下这个工具就可以轻松实现图上效果

map.plugin(["AMap.MarkerClusterer"], function () {
    cluster = new AMap.MarkerClusterer(map, markers);
});

---

• 点聚合状态下删除和添加点

这时候需求就来了，根据websocket收到的数据，动态修改点的样式，也就是说把原来的点删除，在一样的位置上重新点上一个点，顺带把icon的样式给换了，挺合理，那就做呗。看了下官方的事例，删除点有两种方法：

1. markers[0].setMap(null);
2. map.remove(markers[0]);

执行完毕，没有问题。点确实删除了，在点删除之后又把新的样式的点打上

坑：在移动滚轮切换地图缩放级别的时候，会发现原来的点和现在的点重合在一起，看到的效果就是一个点，随着你的鼠标滚轮的滚动，颜色在不停的变化，造成的原因就是两个点重合在了一起。

这下我就纳闷了，我还把重新打点的方法延迟了几秒钟执行，清清楚楚看到原来的点删除了，新的点上去。

立马跑到官方的点聚合的事例中：在控制台打 map.remove(markers);确实是删除了

但当我移动滚轮的时候就又出现了，官方的事例也会出现这种BUG？怀疑人生。

我想起高德地图有问题可以去提交工单，我就开始写一下工单，写到一半发现需要填写一下具体是哪个发生问题，上面提示可以参考官方的参考手册，我就去参考里面找、高德地图官方文档的参考手册工具栏中有点聚合。结果大大的白纸黑字上面写着：

哭笑不得、、、赶紧删除工单，这脸丢大发了！！！

 // 从点聚合中移除
 cluster.removeMarker(jsonMarkers[id]);
 // 创建新的点
 marker = new AMap.Marker({
     position: position,
     icon: icon_style
 });
 // 把新的点放进集合中
 jsonMarkers[id] = marker;
 // 将新的点添加到点聚合中去
 cluster.addMarker(marker);
 // 添加点击事件
 AMap.event.addListener(marker, 'click', function () {
     // 这是请求数据，并返回，自定义infowindow
     openInfoWindow(id,address,position,0);
 });
 openInfoWindow(id,address,position,done);

点聚合之中包含了原来的点的记录，所以普通删除并不会奏效，早点看官方文档就好了！！！