Sterowanie powiększaniem i przesuwaniem

Wybierz platformę: Android iOS JavaScript

Przegląd

Korzystanie z mapy na stronie internetowej może wymagać określonych opcji, które kontrolują sposób interakcji użytkowników z mapą w celu powiększania i przesuwania. Te opcje, takie jak gestureHandling, minZoom, maxZoom i restriction, są zdefiniowane w interfejsie MapOptions.

Domyślne działanie

Poniższa mapa pokazuje działanie domyślne interakcji z mapą utworzoną tylko z określonymi opcjami zoom i center.

Kod tej mapy znajdziesz poniżej.

TypeScript

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

JavaScript

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

Sterowanie obsługą gestów

Gdy użytkownik przewija stronę zawierającą mapę, może to nieumyślnie spowodować powiększenie mapy. Możesz kontrolować to zachowanie za pomocą opcji mapy gestureHandling.

gestureHandling: cooperative

Poniższa mapa korzysta z opcji gestureHandling ustawionej na cooperative, co pozwala użytkownikowi przewijać stronę w normalny sposób 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ę, używając 2 palców na urządzeniach z ekranem dotykowym.

Poniżej znajdziesz kod tej mapy.

TypeScript

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

JavaScript

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

Wyświetl próbkę

gestureHandling: auto

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

Mapa zawarta w <iframe> Zachowanie
tak cooperative
nie greedy

gestureHandling: greedy

Poniżej znajduje się mapa z parametrem gestureHandling ustawionym na greedy. Ta mapa reaguje na wszystkie gesty dotykowe i zdarzenia przewijania, w przeciwieństwie do cooperative.

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

JavaScript

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

Poniższa mapa pokazuje połączenie funkcji gestureHandling i zoomControl w powyższym kodzie.

Ograniczanie granic mapy i powiększenia

Możesz zezwolić na gesty i sterowanie powiększeniem, ale ograniczyć mapę do określonych granic lub minimalnego i maksymalnego powiększenia. Aby to zrobić, możesz ustawić opcje restriction, minZoom i maxZoom. Te opcje są widoczne w poniższym kodzie i na mapie.

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