Panoramica
L'utilizzo di una mappa su una pagina web potrebbe richiedere opzioni specifiche per controllare il modo in cui gli utenti interagiscono con la mappa per eseguire lo zoom e la panoramica. Queste opzioni, come gestureHandling, minZoom, maxZoom e restriction, sono definite nell'interfaccia MapOptions.
Comportamento predefinito
La mappa seguente mostra il comportamento predefinito per le interazioni con una mappa di cui è stata creata un'istanza con solo le opzioni zoom e center definite.
Il codice per questa mappa è riportato di seguito.
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 della mappa gestureHandling.
gestureHandling: cooperative
La mappa di seguito utilizza l'opzione gestureHandling impostata su cooperative, consentendo all'utente di scorrere la pagina normalmente, senza aumentare lo zoom o eseguire la panoramica della mappa. Gli utenti possono aumentare lo zoom della mappa facendo clic sui controlli di zoom. Possono anche eseguire lo zoom e la panoramica utilizzando i movimenti con due dita sulla mappa per i dispositivi touchscreen.
Il codice per questa mappa è riportato di seguito.
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 di questa pagina si trovano all'interno di un <iframe>. Il valore predefinito di gestureHandling
auto passa da greedy a cooperative a seconda che la mappa sia
contenuta o meno in un <iframe>.
Mappa contenuta in <iframe> |
Comportamento |
|---|---|
| sì | cooperative |
| no | greedy |
gestureHandling: greedy
Di seguito è riportata una mappa con gestureHandling impostato su greedy. Questa mappa reagisce a tutti i gesti di tocco e agli eventi di scorrimento, a differenza di cooperative.
gestureHandling: none
L'opzione gestureHandling può anche essere impostata su none per disattivare i gesti sulla mappa.
Disattivazione di panoramica e zoom
Per disattivare 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 un determinato confine o a uno zoom minimo e massimo. Per farlo, 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, }, }, });