基于百度地图api清除指定覆盖物(Overlay)的方法


Posted in Javascript onJanuary 26, 2018

最近用百度地图api做项目,需要同时在地图显示marker与Polyline,且Polyline需要根据点击来显示或清除,所以遇到了清除指定覆盖物的问题,各种搜索后未能找到完美的解决方法,通过自己思考,摸索了一方法能解决这个问题,发出来给大家分享。好了,进入正题:

清除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),clearOverlays()方法一次移除所有的覆盖物,removeOverlay()一次移除一个指定覆盖物,显然,我要一次移除一类Polyline覆盖物,这两个方法都不适用。

百度demo(http://developer.baidu.com/map/jsdemo.htm#c1_17)有removeOverlay()的例子,如下:

function deletePoint(){
    var allOverlay = map.getOverlays();
    for (var i = 0; i < allOverlay.length -1; i++){
      if(allOverlay[i].getLabel().content == "我是id=1"){
        map.removeOverlay(allOverlay[i]);
        return false;
      }
    }
  }

是通过遍历所有覆盖物来筛选所要移除的覆盖;

对于要移除一类覆盖物;可以在添加覆盖物的时候做限制设置;

第一步:在添加覆盖的时候对不需要进行移除操作的覆盖设置disableMassClear();官网文档解释如下

disableMassClear()

none 禁止覆盖物在 map.clearOverlays 方法中被清除。 (自 1.1新增)

我这里不需要对marker进行移除操作,所以设置如下:

marker.disableMassClear();

第二步:清除所要清除的覆盖物,这里需要清除所有的Polyline而不清除marker,现在可以直接使用

map.clearOverlays();

这样就能很方便的清除所有Polyline而保留marker;

第三步:当后来需要对marker进行移除操作时,可以使用enableMassClear()方法来取消禁止清除;

enableMassClear()

none 允许覆盖物在 map.clearOverlays 方法中被清除。 (自 1.1新增)

但是需要对每个marker进行恢复操作,所以需要进行遍历:

var allOverlay = map.getOverlays();
      for (var i = 0; i < allOverlay.length; i++) {
        allOverlay[i].enableMassClear();
      }

这样就恢复了所有覆盖物的可清除操作。

简单三步设置便可高效操作指定类覆盖物。

以上这篇基于百度地图api清除指定覆盖物(Overlay)的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
详解Document.Cookie
Dec 25 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 #Javascript
微信小程序实现animation动画
Jan 26 #Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
微信小程序如何获取用户手机号
Jan 26 #Javascript
Vue header组件开发详解
Jan 26 #Javascript
Vue shopCart 组件开发详解
Jan 26 #Javascript
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
扩展String功能方法
2006/09/22 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python实现多属性排序的方法
2018/12/05 Python
代码详解django中数据库设置
2019/01/28 Python
python async with和async for的使用
2019/06/20 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
自我评价范文
2013/12/22 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2016公司新年问候语
2015/11/11 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis