基于百度地图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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
JS中箭头函数与this的写法和理解
Jan 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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
Django admin美化插件suit使用示例
2017/12/12 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
DIY手工制作经营店创业计划书
2014/02/01 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书