-
点聚合实现
最近做项目一直在和高德地图打交道。。。坑坑坑
打点一旦多,对于密集恐惧症的人来说就是一场灾难,所以官方给出了解决方案---点聚合。
在地图打点就这样轻松实现
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);
点聚合之中包含了原来的点的记录,所以普通删除并不会奏效,早点看官方文档就好了!!!