Panoramica
L'utilizzo di una mappa in una pagina web potrebbe richiedere opzioni specifiche per controllare il modo in cui gli utenti interagiscono con la mappa per aumentare lo zoom e eseguire la panoramica. Queste opzioni, come gestureHandling
, minZoom
, maxZoom
e restriction
, sono definite nell'interfaccia di MapOptions.
Comportamento predefinito
La mappa seguente mostra il comportamento predefinito per le interazioni sulla mappa con un'istanza di mappa creata solo con le opzioni zoom
e center
definite.
Di seguito è riportato il codice di questa mappa.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
Controllo della gestione dei gesti
Quando un utente scorre una pagina che contiene una mappa, l'azione di scorrimento può causare involontariamente lo zoom della mappa. Questo comportamento può essere controllato utilizzando l'opzione mappa gestureHandling.
gestione gesti: cooperative
La mappa sottostante utilizza l'opzione gestureHandling impostata su cooperative
, che consente all'utente di scorrere la pagina normalmente, senza eseguire lo zoom o la panoramica della mappa. Gli utenti possono aumentare o diminuire lo zoom della mappa facendo clic sui controlli dello zoom. Possono anche eseguire lo zoom e la panoramica utilizzando movimenti con due dita sulla mappa per i dispositivi con touchscreen.
Di seguito è riportato il codice di questa mappa.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
gestureHandling: auto
La mappa nella parte superiore della pagina senza l'opzione gestureHandling
ha lo stesso
comportamento della mappa precedente con gestureHandling
impostato su cooperative
perché tutte le mappe in questa pagina si trovano all'interno di
<iframe>
. Il valore predefinito gestureHandling
auto
passa da greedy
a cooperative
a seconda che la mappa sia
contenuta all'interno di un elemento <iframe>
.
Mappa contenuta in <iframe> |
Comportamento |
---|---|
sì | cooperative |
no | greedy |
gestureHandling: greedy
Di seguito è riportata una mappa con gestureHandling impostato su greedy
. A differenza di cooperative
, questa mappa reagisce a tutti i gesti tocco e gli eventi di scorrimento.
gestureHandling: none
L'opzione gestureHandling può essere impostata anche su
none
per disabilitare i gesti sulla mappa.
Disattivazione della panoramica e dello zoom
Per disabilitare completamente la possibilità di eseguire la panoramica e lo zoom della mappa, è necessario includere due opzioni, gestureHandling e zoomControl.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "none", zoomControl: false, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
La mappa seguente mostra la combinazione di gestureHandling e zoomControl nel codice riportato sopra.
Limitazione dei limiti e dello zoom della mappa
Potrebbe essere opportuno consentire i gesti e i controlli dello zoom, ma limitare la mappa a determinati limiti o a uno zoom minimo e massimo. A questo scopo, puoi impostare le opzioni restriction, minZoom e maxZoom. Il codice e la mappa seguenti mostrano queste opzioni.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });