Overlay al suolo

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

Introduzione

Le sovrapposizioni sono oggetti sulla mappa collegati alle coordinate di latitudine/longitudine, quindi si spostano quando trascini o esegui lo zoom sulla mappa. Se vuoi posizionare un'immagine su una mappa, puoi utilizzare un oggetto GroundOverlay.

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

Aggiungere un overlay del suolo

Il costruttore di un elemento GroundOverlay specifica l'URL di un'immagine e il valore LatLngBounds dell'immagine come parametri. L'immagine verrà visualizzata sulla mappa, vincolata ai limiti specificati e conforme utilizzando la 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 un overlay del suolo

Per rimuovere un overlay da una mappa, richiama il metodo setMap() dell'overlay, trasmettendo null. Tieni presente che la chiamata a questo metodo non elimina l'overlay. L'overlay viene rimosso dalla mappa. Se invece vuoi eliminare l'overlay, rimuovilo dalla mappa e poi impostalo su null.

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

Visualizza esempio