基于百度地图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也能包含文件
Oct 26 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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格式输出文件var_export函数实例
2014/11/15 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
SVM基本概念及Python实现代码
2017/12/27 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
药品采购员岗位职责
2014/02/08 职场文书
经济管理自荐书
2014/06/09 职场文书
教书育人演讲稿
2014/09/11 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
中班上学期个人总结
2015/02/12 职场文书
入党团支部推荐意见
2015/06/02 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
高一军训口号
2015/12/25 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
python执行js代码的方法
2021/05/13 Python
Nginx进程调度问题详解
2021/09/25 Servers
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript
mysqldump进行数据备份详解
2022/07/15 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers
Java Redisson多策略注解限流
2022/09/23 Java/Android