Overlay al suolo

Seleziona la piattaforma: Android iOS JavaScript
  1. Introduzione
  2. Aggiungere un overlay al suolo
  3. Rimuovere un overlay al suolo

Introduzione

Gli overlay sono oggetti sulla mappa legati 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 al 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.

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;

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;
Visualizza esempio

Prova Samples

Rimuovere un overlay del suolo

Per rimuovere un overlay da una mappa, chiama il metodo setMap() dell'overlay, trasmettendo null. Tieni presente che la chiamata a questo metodo non comporta l'eliminazione dell'overlay. L'overlay viene rimosso dalla mappa. Se invece vuoi eliminarlo, devi rimuoverlo dalla mappa e poi impostare l'overlay su null.

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

Visualizza esempio