基于百度地图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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vue地区选择组件教程详解
May 04 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
在vue中实现echarts随窗体变化
Jul 27 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
微信小程序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
初品cakephp 入门基础
2012/02/16 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
PHP守护进程实例
2015/03/06 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python删除某个目录文件夹的方法
2020/05/26 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
怎样写留学自荐信
2013/11/11 职场文书
运动会稿件200字
2014/02/07 职场文书
班级德育工作实施方案
2014/02/21 职场文书
财务担保书范文
2014/04/02 职场文书
迎国庆演讲稿
2014/09/15 职场文书
申请吧主发表的感言
2015/08/03 职场文书