Display markers and Polyline in Baidu map

This time I will bring you Baidu Map to display markers and Polyline, and Baidu Map to display markers and Polyline Precautions What are the practical cases below, let’s take a look one time.

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, so I encountered the problem of clearing the designated covering. I couldn't find a perfect solution after searching . After thinking on my own, 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;
      }
    }
  }

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

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

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()

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();

Second step: Clear the covering to be cleared. Here you need to clear all the Polyline without clearing the marker. Now you can directly use

map.clearOverlays();

. 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()

none Allow overlays 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();
      }

This restores the clearable operations of all overlays.

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue.js implements a single pop-up box

Detailed explanation of the use of javascript trie prefix tree

The above is the detailed content of Display markers and Polyline in Baidu map. For more information, please follow other related articles on the PHP Chinese website!