Controllo dello zoom e della 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 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,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

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 di seguito utilizza l'opzione gestureHandling impostata su cooperative, che consente all'utente di scorrere normalmente la pagina, 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.

Il codice di questa mappa è riportato di seguito.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

Visualizza esempio

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

Di seguito è riportata una mappa con gestureHandling impostato su greedy. Questa mappa reagisce a tutti i gesti touch ed eventi di scorrimento a differenza di altri cooperative.

gestione gesti: none

È possibile impostare anche l'opzione gestureHandling 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, esistono due opzioni: gestureHandling e È necessario includere zoomControl.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

La mappa seguente illustra la combinazione di gestureHandling e zoomControl nel codice riportato sopra.

Limitare i limiti della mappa e lo zoom

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,
    },
  },
});
index.ts

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,
    },
  },
});
index.js