Home Web Front-end JS Tutorial How to clear the specified overlay in Baidu map api

How to clear the specified overlay in Baidu map api

Jan 31, 2018 am 09:43 AM
api designation Clear

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to completely remove viruses from mobile phones Recommended methods to deal with viruses in mobile phones How to completely remove viruses from mobile phones Recommended methods to deal with viruses in mobile phones Feb 29, 2024 am 10:52 AM

After a mobile phone is infected with a certain Trojan virus, it cannot be detected and killed by anti-virus software. This principle is just like a computer infected with a stubborn virus. The virus can only be completely removed by formatting the C drive and reinstalling the system. , then I will explain how to completely clean the virus after the mobile phone is infected with a stubborn virus. Method 1: Open the phone and click "Settings" - "Other Settings" - "Restore Phone" to restore the phone to factory settings. Note: Before restoring factory settings, you must back up important data in the phone. The factory settings are equivalent to those of the computer. "It's the same as formatting and reinstalling the system". After the recovery, the data in the phone will be cleared. Method 2 (1) First turn off the phone, then press and hold the "power button" + "volume + button or volume - button" on the phone at the same time.

How to free up WPS cloud document space How to free up WPS cloud document space Feb 24, 2024 pm 06:12 PM

How to clear WPS cloud document space when it is full. With the rapid development of cloud technology, more and more people are beginning to use cloud storage to store and manage their files. Among them, WPS Cloud Document, as an intelligent office software, is very popular among users. However, as the usage time increases and files accumulate, the storage space of WPS cloud documents may be filled up. So, when the WPS cloud document space is full, how should we clear it? Next, we will introduce some common cleaning methods to you. The first method is to completely delete unwanted files. W

How to crawl and process data by calling API interface in PHP project? How to crawl and process data by calling API interface in PHP project? Sep 05, 2023 am 08:41 AM

How to crawl and process data by calling API interface in PHP project? 1. Introduction In PHP projects, we often need to crawl data from other websites and process these data. Many websites provide API interfaces, and we can obtain data by calling these interfaces. This article will introduce how to use PHP to call the API interface to crawl and process data. 2. Obtain the URL and parameters of the API interface. Before starting, we need to obtain the URL of the target API interface and the required parameters.

How to clear console in C language? How to clear console in C language? Sep 23, 2023 pm 09:57 PM

There are several ways to clear the console or output screen, one of which is the clrscr() function. It clears the screen when the function is called. It is declared in the "conio.h" header file. There are some other methods such as system("cls") and system("clear"), which are declared in the "stdlib.h" header file. The following is the syntax for clearing the console in C language: clrscr();ORsystem("cls");ORsystem("clear");The following is a use

React API Call Guide: How to interact and transfer data with the backend API React API Call Guide: How to interact and transfer data with the backend API Sep 26, 2023 am 10:19 AM

ReactAPI Call Guide: How to interact with and transfer data to the backend API Overview: In modern web development, interacting with and transferring data to the backend API is a common need. React, as a popular front-end framework, provides some powerful tools and features to simplify this process. This article will introduce how to use React to call the backend API, including basic GET and POST requests, and provide specific code examples. Install the required dependencies: First, make sure Axi is installed in the project

Clear LRU cache in Python Clear LRU cache in Python Sep 10, 2023 pm 12:57 PM

In this article, we will learn how to clear an LRUcache implemented in Python. performance. LRUCache stores a limited number of items and

Oracle API Usage Guide: Exploring Data Interface Technology Oracle API Usage Guide: Exploring Data Interface Technology Mar 07, 2024 am 11:12 AM

Oracle is a world-renowned database management system provider, and its API (Application Programming Interface) is a powerful tool that helps developers easily interact and integrate with Oracle databases. In this article, we will delve into the Oracle API usage guide, show readers how to utilize data interface technology during the development process, and provide specific code examples. 1.Oracle

Oracle API integration strategy analysis: achieving seamless communication between systems Oracle API integration strategy analysis: achieving seamless communication between systems Mar 07, 2024 pm 10:09 PM

OracleAPI integration strategy analysis: To achieve seamless communication between systems, specific code examples are required. In today's digital era, internal enterprise systems need to communicate with each other and share data, and OracleAPI is one of the important tools to help achieve seamless communication between systems. This article will start with the basic concepts and principles of OracleAPI, explore API integration strategies, and finally give specific code examples to help readers better understand and apply OracleAPI. 1. Basic Oracle API

See all articles