Home > Web Front-end > JS Tutorial > body text

How to clear the specified overlay in Baidu map api

小云云
Release: 2018-01-31 09:43:42
Original
2060 people have browsed it

This article mainly shares with you a method of clearing the specified overlay (Overlay) based on Baidu Maps API. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Recently I am working on a project using the Baidu Map API. I need to display markers and polylines on the map at the same time, and the polylines need to be displayed or cleared based on clicks, so I encountered the problem of clearing the specified overlay. After various searches, I couldn't find a 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 removes all overlays at once, and removeOverlay() removes them all at once. A designated overlay, obviously, I want to remove a class of Polyline overlays at a time, neither method works.

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;

The first step: when adding overlays, is it correct? The overlay setting disableMassClear() that needs to be removed is explained in the official website documentation 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 markers here, so the settings are as follows:

marker.disableMassClear();
Copy after login

Step 2: Clear the overlays to be cleared. Here you need to clear all Polyline without clearing the markers, now you can directly use

map.clearOverlays();
Copy after login

This way you can easily clear all the Polylines and keep the markers;

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

enableMassClear()
Copy after login

none allows the overlay to be cleared in the map.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.

Related recommendations:

Drupal 7 Detailed explanation of how to extend Overlay?

##jquery tools series overlay learning_jquery

Implement overlay mask layer code under jquery_jquery

The above is the detailed content of How to clear the specified overlay in Baidu map api. 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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!