Sterowanie powiększaniem i przesuwaniem

Wybierz platformę: Android iOS JavaScript

Omówienie

Korzystanie z mapy na stronie internetowej może wymagać określonych opcji umożliwiających kontrolowanie sposobu, w jaki użytkownicy będą mogli ją powiększać i przesuwać. Te opcje, takie jak gestureHandling, minZoom, maxZoom i restriction, są zdefiniowane w interfejsie MapOptions.

Domyślne zachowanie

Poniższa mapa pokazuje domyślne zachowanie interakcji z mapą zdefiniowaną z użyciem tylko opcji zoom i center.

Kod tej mapy znajdziesz poniżej.

TypeScript

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

JavaScript

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

Kontrolowanie obsługi gestów

Gdy użytkownik przewija stronę zawierającą mapę, może to spowodować niezamierzone powiększenie mapy. Tego zachowania można kontrolować za pomocą opcji mapy gestureHandling.

gestureHandling: cooperative

Na mapie poniżej opcja gestureHandling jest ustawiona na cooperative, co pozwala użytkownikowi normalnie przewijać stronę bez powiększania lub przesuwania mapy. Użytkownicy mogą powiększać mapę, klikając elementy sterujące. Mogą też powiększać i przesuwać mapę, używając 2 palców na ekranie dotykowym.

Kod tej mapy znajdziesz poniżej.

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

Wyświetl próbkę

gestureHandling: auto

Mapa u góry strony bez opcji gestureHandling zachowuje się tak samo jak poprzednia mapa z opcją gestureHandling ustawioną na cooperative, ponieważ wszystkie mapy na tej stronie znajdują się w ramach <iframe>. Domyślna wartość gestureHandling auto przełącza się między greedy a cooperative w zależności od tego, czy mapa jest zawarta w <iframe>.

Mapa zawarta w <iframe> Zachowanie
tak cooperative
nie greedy

gestureHandling: greedy

Poniżej znajduje się mapa z ustawionym parametrem gestureHandling o wartości greedy. W przeciwieństwie do cooperative ta mapa reaguje na wszystkie gesty dotykowe i zdarzenia przewijania.

gestureHandling: none

Opcję gestureHandling można też ustawić na none, aby wyłączyć gesty na mapie.

Wyłączanie przesuwania i powiększania

Aby całkowicie wyłączyć możliwość przesuwania i powiększania mapy, musisz uwzględnić 2 opcje: gestureHandling i 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

Mapa poniżej pokazuje połączenie gestureHandling i zoomControl w powyższym kodzie.

Ograniczanie granic i powiększenia mapy

Możesz na przykład zezwolić na gesty i sterowanie powiększaniem, ale ograniczyć mapę do określonych granic lub do minimalnego i maksymalnego powiększenia. Aby to zrobić, możesz ustawić opcje restriction, minZoom i maxZoom. Poniżej znajdziesz kod i mapę, które pokazują te opcje.

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