基于百度地图api清除指定覆盖物(Overlay)的方法

最近用百度地图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)的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 百度地图去掉marker覆盖物或者去掉maker的label文字方法
赞 (0)

相关推荐

  • 百度地图去掉marker覆盖物或者去掉maker的label文字方法

    如下所示: var marker = new BMap.Marker(...); //方法1 map.removeOverlay(marker); //方法2 marker.remove(); //如果是Marker设置的setLabel还可以设置其样式来隐藏 mapComponent.state.bikeMarkLabel.setStyle({ display:"none" }); 41787 label与marker的方法相同. 建议使用方法1和方法2,方法3只是隐藏而不是清除 以

  • 基于百度地图api清除指定覆盖物(Overlay)的方法

    最近用百度地图api做项目,需要同时在地图显示marker与Polyline,且Polyline需要根据点击来显示或清除,所以遇到了清除指定覆盖物的问题,各种搜索后未能找到完美的解决方法,通过自己思考,摸索了一方法能解决这个问题,发出来给大家分享.好了,进入正题: 清除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),clearOverlays()方法一次移除所有的覆盖物,removeOverlay()一次移除一个指定覆盖物,显然,我要一次移除

  • 百度地图api如何使用

    百度地图api如何使用

    如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,接下来,我们详细介绍下获取.引入api密钥的技巧,以及通过代码给大家详解下百度地图api如何使用,具体请看下文. 首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥. 申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了. 接下来,就是引入百度地图的api 关键代码如下: 复制代码 代码如下: <script type="text/javascrip

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

  • 利用百度地图API获取当前位置信息的实例

    利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: <script type="text/javascript"> var map; var gpsPoint; var baiduPoint; var gpsAddress; var baiduAddress; var x; var y; function getLocation() { //根据IP获取城市 var myCity = new BMap.

  • 百度地图API使用方法详解

    百度地图API使用方法详解

    最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/jsdemo.htm#a1_2 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

  • Android百度定位导航之基于百度地图移动获取位置和自动定位

    Android百度定位导航之基于百度地图移动获取位置和自动定位

    一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyApplication类 public class MyApplication extends Application { static MyApplication myApplication; BMapManager mBMapManager = null; String mStrKey = "7ZfuR

  • 百度地图API之百度地图退拽标记点获取经纬度的实现代码

    本文给大家分享百度地图api之百度地图退拽标记点获取经纬度的实现方法,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0

  • 百度地图API之本地搜索与范围搜索

    百度地图API之本地搜索与范围搜索

    地图服务是指可以提供数据信息的接口,比如说本地搜索/路线规划等,下面小编给大家整理下百度地图API之本地搜索和范围搜索,具体请看下文. 地图服务概述 地图服务是指那些提供数据信息的接口,比如本地搜索.路线规划等等.百度地图API提供的服务有: LocalSearch:本地搜索,提供某一特定地区的位置搜索服务,比如在北京市搜索"公园". TransitRoute:公交导航,提供某一特定地区的公交出行方案的搜索服务. DrivingRoute:驾车导航,提供驾车出行方案的搜索服务. Wal

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • JS使用百度地图API自动获取地址和经纬度操作示例

    JS使用百度地图API自动获取地址和经纬度操作示例

    本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作.分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求. 故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度: 1.HTML代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

随机推荐