基于百度地图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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
js文字横向滚动特效
Nov 11 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python sorted排序方法如何实现
2020/03/31 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python实现三种随机请求头方式
2021/01/05 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
中学教师教育感言
2014/02/21 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
体育教师教学随笔
2015/08/15 职场文书
礼貌问候语大全
2015/11/10 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL