Controllo di zoom e panoramica

Seleziona la piattaforma: Android iOS JavaScript

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 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 sono state definite solo le opzioni zoom e center.

Di seguito è riportato il codice per 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' gestureHandling.

gestureHandling: cooperative

La mappa riportata di seguito 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 eseguire lo zoom della mappa facendo clic sui controlli dello zoom. Possono anche eseguire lo zoom e la panoramica utilizzando i movimenti con due dita sulla mappa per i dispositivi touchscreen.

Di seguito è riportato il codice per 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",
});

Visualizza l'esempio

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 un <iframe>. Il valore predefinito di gestureHandling auto passa da greedy a cooperative a seconda che la mappa sia contenuta in un <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 touch e agli eventi di scorrimento.

gestureHandling: none

L'opzione gestureHandling può anche essere impostata su none per disattivare i gesti sulla mappa.

Disattivazione della panoramica e dello 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 riportata di seguito 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 limiti specifici 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,
    },
  },
});