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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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 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 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 deal with Laravel API error problems How to deal with Laravel API error problems Mar 06, 2024 pm 05:18 PM

Title: How to deal with Laravel API error problems, specific code examples are needed. When developing Laravel, API errors are often encountered. These errors may come from various reasons such as program code logic errors, database query problems, or external API request failures. How to handle these error reports is a key issue. This article will use specific code examples to demonstrate how to effectively handle Laravel API error reports. 1. Error handling in Laravel

Save API data to CSV format using Python Save API data to CSV format using Python Aug 31, 2023 pm 09:09 PM

In the world of data-driven applications and analytics, APIs (Application Programming Interfaces) play a vital role in retrieving data from various sources. When working with API data, you often need to store the data in a format that is easy to access and manipulate. One such format is CSV (Comma Separated Values), which allows tabular data to be organized and stored efficiently. This article will explore the process of saving API data to CSV format using the powerful programming language Python. By following the steps outlined in this guide, we will learn how to retrieve data from the API, extract relevant information, and store it in a CSV file for further analysis and processing. Let’s dive into the world of API data processing with Python and unlock the potential of the CSV format

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

How to Use Safari's Private Browsing Mode How to Use Safari's Private Browsing Mode Nov 29, 2023 pm 11:33 PM

This mode prevents your browsing history from being recorded on your Apple device. This is a useful feature if you're buying a gift for a friend or family member online, for example, and you don't want anyone with access to your device to know what you're doing. Of course, if you’ve browsed somewhere you shouldn’t and haven’t used Safari’s dedicated privacy mode, don’t worry – we’ll also show you two different ways to delete your existing browsing history. Read on to learn how. Enabling private browsing using Safari's private browsing mode limits Safari in three important ways: It prevents the browser from creating a history of the pages you visit, and it blocks autofill information such as websites

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

See all articles