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.
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;
Prova Sample
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); }