基于百度地图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获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
vue中改变滚动条样式的方法
Mar 03 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP序列化操作方法分析
2016/09/28 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
MySQL最常见的操作语句小结
2015/05/07 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python添加菜单图文讲解
2019/06/04 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
python 追踪except信息方式
2020/04/25 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python 在局部变量域中执行代码
2020/08/07 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
培训班主持词
2014/03/28 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
python 中的@运算符使用
2021/05/26 Python
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
教你一步步实现一个简易promise
2021/11/02 Javascript
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python