基于百度地图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的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
element-ui表格合并span-method的实现方法
May 21 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
design vue 表格开启列排序的操作
Oct 28 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 注释规范
2012/03/29 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
php动态变量定义及使用
2015/06/10 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
javascript的内存管理详解
2013/08/07 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python matlibplot绘制3D图形
2018/07/02 Python
python3 读取Excel表格中的数据
2018/10/16 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
python文件编写好后如何实践
2020/07/07 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
配件采购员岗位职责
2013/12/03 职场文书
庆七一活动方案
2014/01/25 职场文书
学校安全检查制度
2014/01/27 职场文书
安全生产实施方案
2014/02/23 职场文书
岗位竞聘书范文
2014/03/31 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS