Nakładki na powierzchnię

Wybierz platformę: Android iOS JavaScript
  1. Wprowadzenie
  2. Dodawanie nakładki na powierzchnię
  3. Usuwanie nakładki na ziemię

Wprowadzenie

Nakładki to obiekty na mapie powiązane ze współrzędnymi geograficznymi, które poruszają się, gdy przeciągasz mapę lub powiększasz jej widok. Jeśli chcesz umieścić obraz na mapie, możesz użyć obiektu GroundOverlay.

Informacje o innych typach nakładek znajdziesz w artykule Rysowanie na mapie.

Dodawanie nakładki nawierzchni

Konstruktor obiektu GroundOverlay określa adres URL obrazu oraz jego LatLngBounds jako parametry. Obraz zostanie wyrenderowany na mapie, ograniczony do podanych granic i dopasowany za pomocą jej projekcji.

TypeScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds,
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Usuwanie nakładki na ziemi

Aby usunąć nakładkę z mapy, wywołaj metodę setMap() nakładki, przekazując parametr null. Pamiętaj, że wywołanie tej metody nie powoduje usunięcia nakładki. Usunie nakładkę z mapy. Jeśli chcesz usunąć nakładkę, usuń ją z mapy, a następnie ustaw dla niej wartość null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Zobacz przykład