Overlay al suolo

1. Introduzione
2. Aggiungere un overlay del suolo
3. Rimuovere un overlay del suolo

Introduzione

Gli overlay sono oggetti sulla mappa legati alle coordinate di latitudine/longitudine, quindi si spostano quando trascini o esegui lo zoom della mappa. Se vuoi inserire un'immagine su una mappa, puoi utilizzare un oggetto GroundOverlay.

Per informazioni su altri tipi di overlay, consulta Disegnare sulla mappa.

Aggiungere una sovrapposizione al suolo

Il costruttore per GroundOverlay specifica l'URL di un'immagine e LatLngBounds dell'immagine come parametri. L'immagine verrà visualizzata sulla mappa, sarà vincolata ai limiti specificati e sarà conforme alla proiezione della mappa.

// 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

// 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

Rimuovere una sovrapposizione del suolo

Per rimuovere un overlay da una mappa, chiama il metodo setMap() dell'overlay, trasmettendo null. Tieni presente che la chiamata di questo metodo non comporta l'eliminazione dell'overlay. Rimuove l'overlay dalla mappa. Se invece vuoi eliminare l'overlay, devi rimuoverlo dalla mappa e poi impostarlo su null.

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

Visualizza esempio