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

点聚合实现

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

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

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

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 () {// 这是请求数据，并返回，自定义infowindowopenInfoWindow(id,address,position,0);});openInfoWindow(id,address,position,done);

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

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

高德地图聚合android,GitHub - lingyanluoxue/android-togetherMap: 实现高德地图的marker聚合功能...
android-togetherMap 本文我将讲解一下我最近实现的高德地图Marker的聚合功能.在项目开发中需要使用到地图Marker的聚合功能,但是高德地图并没有实现对Marker的聚合功能,所 ...
日化美妆如何在高德地图上投放广告？高德地图投放广告的效果
在高德地图上投放日化美妆类的广告是有要求的,像是一般类的化妆品产品,个人护理产品和家用的清洁品牌产品是可以投放的,带有保健或者治疗效果的特殊化妆品或者私人用品等产品是不允许投放的,特殊化产品包括染发, ...
高德地图目前是哪个集团下的公司？
其实在2014年02月,阿里巴巴就斥资11亿美元,完成对高德地图的全资收购,所以高德地图目前是属于阿里巴巴集团下的公司了. 在这个路痴众多的时代,高德地图的出现可谓是拯救了一大波路痴者. 人人手机上几 ...
高德地图, 点聚合效果，以及给点添加点击事件
这个试用于高德地图, 首先要调用方法 'AMap.MarkerCluster', if (clusters) { clusters.setMap(null) } clusters = new VueA ...
可用！三行代码高仿高德地图三段式抽屉效果
三行代码废话不在前面说,直接上代码! 将 XML 根布局设置为 CoordinatorLayout <android.support.design.widget.CoordinatorLayo ...
高德地图模拟行车轨迹效果
下载地址模拟行车轨迹效果,采用高德地图实现的.基本思路:1. 初始化地图2. 获取随机路线的坐标数组Points,转Marker对象数组3. 创建地图折线实例4. 使用定时函数,控制车辆模拟行车轨迹的 ...
使用高德地图api点聚合案例 (自定义样式)
高德地图api地址:https://lbs.amap.com/api/javascript-api/reference/map 1.异步创建script标签注意需要MarkerClusterer插件 ...
html 地址点击召唤高德,高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）...
javascript 区划聚合+海量点展现 html, body, #container { width: 100%; height: 100%; margin: 0px; } #loadingTip ...
高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi ...

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

点聚合实现

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

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

最新文章

热门文章