Home > Web Front-end > JS Tutorial > How to clear the specified overlay using Baidu Maps API? How to do it specifically?

How to clear the specified overlay using Baidu Maps API? How to do it specifically?

亚连
Release: 2018-06-09 13:37:53
Original
2122 people have browsed it

Below I will share with you a method of clearing the specified overlay based on Baidu Maps API. It has a good reference value and I hope it will be helpful to everyone.

Recently I was working on a project using the Baidu Map API. I needed to display markers and polylines on the map at the same time, and the polylines needed to be displayed or cleared based on clicks. Therefore, I encountered the problem of clearing the specified overlay, and could not find it after various searches. The perfect solution. Through my own thinking, I found a way to solve this problem and posted it to share with everyone. Okay, let’s get to the point:

There are two methods for clearing overlays: map.removeOverlay() or map.clearOverlays(). The clearOverlays() method moves one at a time. In addition to all overlays, removeOverlay() removes one specified overlay at a time. Obviously, I want to remove one type of Polyline overlay at a time, and neither method is applicable.

Baidu demo (http://developer.baidu.com/map/jsdemo.htm#c1_17) has an example of removeOverlay(), as follows:

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;
      }
    }
  }
Copy after login

is done by traversing all overlays Filter the overlays to be removed;

For a type of overlays to be removed; you can set restrictions when adding overlays;

Step 1: When adding an overlay, set disableMassClear() for the overlay that does not need to be removed; the official website document explains it as follows

disableMassClear()
Copy after login

none prohibits the overlay from being cleared in the map.clearOverlays method. (Added since 1.1)

I don’t need to remove the marker here, so the settings are as follows:

marker.disableMassClear();
Copy after login

Step 2: Clear the overlay to be cleared , here you need to clear all the Polyline without clearing the marker. Now you can directly use

map.clearOverlays();
Copy after login

. This way you can easily clear all the Polyline and keep the marker;

Step 3: When you need to remove the marker later, you can use the enableMassClear() method to cancel the prohibition of clearing;

enableMassClear()
Copy after login

none allows the overlay to be in the map. Cleared in the clearOverlays method. (Added since 1.1)

But each marker needs to be restored, so it needs to be traversed:

var allOverlay = map.getOverlays();
      for (var i = 0; i < allOverlay.length; i++) {
        allOverlay[i].enableMassClear();
      }
Copy after login

This restores the clearable operations of all overlays.

A simple three-step setup can efficiently operate the specified type of covering.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement ajax front-end and back-end cross-domain requests

Customize ajax to support cross-domain components (detailed tutorial)

How to implement verification code to obtain countdown effect through WeChat applet

The above is the detailed content of How to clear the specified overlay using Baidu Maps API? How to do it specifically?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template