Panoramica
L'utilizzo di una mappa in una pagina web può 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 sulla mappa con un'istanza di mappa creata solo con le opzioni zoom
e center
definite.
Il codice di 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 lo zoom sulla mappa involontariamente. Questo comportamento può essere controllato utilizzando Opzione di mappa gestureHandling.
gestione gesti: cooperative
La mappa seguente utilizza l'opzione gestureHandling impostata
a cooperative
, consentendo all'utente di scorrere la pagina normalmente, senza aumentare lo zoom
o eseguire la panoramica della mappa. Gli utenti possono eseguire lo zoom della mappa facendo clic sui relativi controlli. Loro
puoi anche eseguire lo zoom e la panoramica usando movimenti con due dita sulla mappa per il touchscreen
dispositivi mobili.
Il codice di 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", });
gestione gesti: auto
La mappa nella parte superiore della pagina senza l'opzione gestureHandling
ha lo stesso
del comportamento della mappa precedente con gestureHandling
impostato su cooperative
perché tutte le mappe in questa pagina si trovano all'interno di un
<iframe>
. Il valore predefinito di gestureHandling
auto
passa da greedy
a cooperative
in base al fatto che la mappa sia
contenuti in un <iframe>
.
Mappa contenuta in <iframe> |
Comportamento |
---|---|
sì | cooperative |
no | greedy |
gestione gesti: greedy
Una mappa con gestureHandling impostato su greedy
è
di seguito. Questa mappa reagisce a tutti i gesti touch ed eventi di scorrimento a differenza di altri
cooperative
.
gestione gesti: none
L'opzione gestureHandling può essere impostata anche su
none
per disattivare i gesti sulla mappa.
Disattivazione della panoramica e dello zoom
Per disattivare del tutto la possibilità di eseguire la panoramica e lo zoom della mappa, sono disponibili due opzioni: gestureHandling e È necessario includere 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 illustra la combinazione di gestureHandling e zoomControl nel codice riportato sopra.
Limitazione dei limiti e dello zoom della mappa
Potrebbe essere utile consentire i gesti e i controlli dello zoom, ma limitare la mappa a limiti specifici o uno zoom minimo e massimo. A questo scopo, puoi imposta la limitazione, minZoom, e maxZoom. Il codice e la mappa seguenti dimostreremo 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, }, }, });