基于百度地图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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
jquery 插件学习(三)
Aug 06 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Python实现把回车符\r\n转换成\n
2015/04/23 Python
树莓派实现移动拍照
2019/06/22 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python谱减法语音降噪实例
2019/12/18 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
大学自主招生自荐信
2013/12/16 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
停车场管理协议书范本
2014/10/08 职场文书
入党培养人考察意见
2015/06/08 职场文书
丧事答谢词大全
2015/09/30 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL