基于百度地图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或css文件后面跟参数的原因说明
Jan 09 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
javascript解析json实例详解
Nov 05 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
Vue父子组件传值的一些坑
Sep 16 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 快速生成 Flash 动画的方法
2007/03/06 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php取得字符串首字母的方法
2015/03/25 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Django 中间键和上下文处理器的使用
2019/03/17 Python
基于python实现百度翻译功能
2019/05/09 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python 如何快速复制序列
2020/09/07 Python
python实现登录与注册系统
2020/11/30 Python
Python常用断言函数实例汇总
2020/11/30 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
培训心得体会
2013/12/29 职场文书
社区党务公开实施方案
2014/03/18 职场文书
英文商务邀请函范文
2015/01/31 职场文书
会议新闻稿
2015/07/17 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
职工宿舍管理制度
2015/08/05 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫