基于百度地图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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
微信小程序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
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
简述Python2与Python3的不同点
2018/01/21 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Django中的文件的上传的几种方式
2018/07/23 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python中os.remove()用法及注意事项
2021/01/31 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
学生思想表现的评语
2014/01/30 职场文书
企业申诉管理制度
2014/01/30 职场文书
人事专员的岗位职责
2014/03/01 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
模特大赛策划方案
2014/05/28 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
唐山大地震的观后感
2015/06/05 职场文书
小学大队长竞选稿
2015/11/20 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis