基于百度地图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 nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
Webpack的dll功能使用
Jun 28 Javascript
vue中render函数的使用详解
Oct 12 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php实现webservice实例
2014/11/06 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
node.js事件轮询机制原理知识点
2019/12/22 Javascript
详解Vue之事件处理
2020/07/10 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
PyQt5实现拖放功能
2018/04/25 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
通过python3实现投票功能代码实例
2019/09/26 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
个人求职信范例
2014/01/29 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
高考1977观后感
2015/06/04 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL