Overlay al suolo

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

Introduzione

Le sovrapposizioni sono oggetti sulla mappa collegati coordinate di latitudine/longitudine, in modo che si muovano quando trascini o eseguire lo zoom della mappa. Se vuoi inserire un'immagine su una mappa, puoi utilizzare un GroundOverlay oggetto.

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

Aggiungi un overlay al suolo

Il costruttore di un GroundOverlay specifica l'URL di un'immagine e LatLngBounds dell'immagine come parametri. L'immagine il rendering sulla mappa, vincolato ai limiti specificati e conformi 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;
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 al suolo

Per rimuovere un overlay da una mappa, chiama la funzione setMap(), superando null. Tieni presente che chiamando questo metodo, l'overlay non viene eliminato. Rimuove l'overlay dalla mappa. Se invece vuoi eliminare l'overlay, rimuovila dalla mappa e poi imposta si sovrappone a null.

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

Visualizza esempio