Overlay del suolo

Seleziona la piattaforma: Android iOS JavaScript
  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 la mappa o ne aumenti lo zoom. 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 un overlay del suolo

Il costruttore di un GroundOverlay specifica un URL di un'immagine e il LatLngBounds dell'immagine come parametri. L'immagine verrà visualizzata sulla mappa, limitata ai limiti specificati e conforme alla 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;
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
Visualizza esempio

Prova Sample

Rimuovere un overlay del suolo

Per rimuovere un overlay da una mappa, chiama il metodo setMap() dell'overlay, passando null. Tieni presente che la chiamata a questo metodo non elimina l'overlay. Rimuove l'overlay dalla mappa. Se invece vuoi eliminare l'overlay, deve rimuoverlo dalla mappa e impostare l'overlay stesso su null.

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

Visualizza esempio