基于百度地图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 相关文章推荐
JScript的条件编译
May 29 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jquery分页对象使用示例
Apr 01 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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者的疑难问答(1)
2006/10/09 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php缓冲输出实例分析
2015/01/05 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
学期自我鉴定范文
2013/10/01 职场文书
中英双版中文教师求职信
2013/10/27 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
新年联欢会主持词
2014/03/27 职场文书
教师求职自荐书
2014/06/14 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
个人培训总结
2015/03/05 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
Redis全局ID生成器的实现
2022/06/05 Redis