Controllo dello zoom e della panoramica

Seleziona la piattaforma: Android iOS JavaScript

Panoramica

L'utilizzo di una mappa su 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, quali gestureHandling, minZoom, maxZoom e restriction, sono definite nell'interfaccia di MapOptions.

Comportamento predefinito

La mappa seguente mostra il comportamento predefinito per le interazioni con una mappa con una 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,
});
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 inavvertitamente lo zoom della mappa. Questo comportamento può essere controllato utilizzando l'opzione della mappa gestureHandling.

gestione gesti: cooperative

La mappa di seguito utilizza l'opzione gestureHandling impostata su cooperative, consentendo 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 di zoom. Possono anche eseguire lo zoom e la panoramica muovendo con due dita sulla mappa per i dispositivi 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 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 di gestureHandlingauto passa da greedy a cooperative a seconda che la mappa sia contenuta all'interno di un <iframe>.

Mappa contenuta all'interno di <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 di tocco e agli eventi di scorrimento a differenza di cooperative.

gestione gesti: none

L'opzione gestureHandling può essere impostata anche 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,
});
index.ts

JavaScript

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

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

Limitazione dei limiti e dello zoom sulla mappa

Potrebbe essere opportuno consentire i gesti e i controlli dello zoom, ma limitare la mappa a un limite specifico 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,
    },
  },
});
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