基于百度地图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仿flash上传头像效果实现代码
Jul 18 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python如何实现转换URL详解
2019/07/02 Python
python挖矿算力测试程序详解
2019/07/03 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
超市促销活动方案
2014/03/05 职场文书
优秀公益广告词大全
2014/03/19 职场文书
数学系毕业生求职信
2014/05/29 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
房产证明范本
2015/06/19 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
java executor包参数处理功能 
2022/02/15 Java/Android
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL