Sterowanie powiększeniem i przesuwaniem

Wybierz platformę: Android iOS JavaScript

Omówienie

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

Zachowanie domyślne

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

Kod tej mapy znajduje się 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ę z mapą, przewijanie może nieumyślnie powiększyć mapę. Działaniem tym można sterować za pomocą gestureHandling.

Obsługa gestów: cooperative

Na mapie poniżej opcja gestureHandling jest ustawiona na cooperative, co pozwala użytkownikowi na normalne przewijanie strony bez powiększania ani przesuwania mapy. Użytkownicy mogą powiększać mapę, klikając elementy sterujące powiększeniem. Mogą też powiększać i przesuwać mapę za pomocą 2 palców na ekranie dotykowym.

Kod tej mapy znajduje się 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

Zobacz przykład

Obsługa gestów: auto

Mapa na górze strony bez opcji gestureHandling ma takie same zachowanie jak w poprzedniej mapie przy użyciu funkcji gestureHandling ustawiono na cooperative, ponieważ wszystkie mapy na tej stronie znajdują się w <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 lokalizacji <iframe> Zachowanie
tak cooperative
nie greedy

Obsługa gestów: greedy

Mapa z gestureHandlingustawionym na greedy to poniżej. W odróżnieniu od 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ększeniem, 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