Sterowanie powiększeniem i przesuwaniem

Wybierz platformę: Android iOS JavaScript

Przegląd

Użycie mapy na stronie internetowej może wymagać określonych opcji kontrolowania sposobu, w jaki użytkownicy korzystają z mapy – powiększania i przesuwania. Te opcje, takie jak gestureHandling, minZoom, maxZoom i restriction, są zdefiniowane w interfejsie MapOptions.

Zachowanie domyślne

Poniższa mapa ilustruje domyślne zachowanie w przypadku interakcji z mapą z mapą utworzoną tylko ze zdefiniowanymi opcjami 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

Sterowanie obsługą gestów

Gdy użytkownik przewija stronę z mapą, przewijanie może przypadkowo spowodować jej powiększenie. Tym działaniem można sterować za pomocą opcji mapy gestureHandling.

Obsługa gestów: cooperative

Poniższa mapa korzysta z opcji gestureHandling, która ma wartość cooperative, co umożliwia użytkownikowi normalne przewijanie strony bez powiększania czy przesuwania mapy. Użytkownicy mogą powiększać mapę, klikając elementy sterujące powiększeniem. Mogą też powiększać i przesuwać mapę, wykonując na niej ruchy dwoma palcami na urządzeniach z ekranem 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 u góry strony bez opcji gestureHandling działa tak samo jak poprzednia mapa z ustawieniem gestureHandling ustawionej na cooperative, ponieważ wszystkie mapy na tej stronie znajdują się w obiekcie <iframe>. Domyślna wartość gestureHandling auto przełącza się między greedy a cooperative w zależności od tego, czy mapa zawiera obiekt <iframe>.

Mapa zawarta w lokalizacji <iframe> Sposób działania
tak cooperative
nie greedy

Obsługa gestów: greedy

Poniżej znajduje się mapa z ustawieniem gestureHandling ustawionym na greedy. W odróżnieniu od cooperative ta mapa reaguje na wszystkie gesty dotykowe i zdarzenia przewijania.

Obsługa gestów: none

Opcję gestureHandling można również ustawić na none, by 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

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

Ograniczanie granic i powiększenia mapy

Może być pożądane zezwolenie na gesty i sterowanie powiększeniem, ale ograniczenie mapy do określonych granic lub do minimalnego i maksymalnego powiększenia. W tym celu możesz ustawić opcje ograniczenia, minZoom i maxZoom. Kod i mapa poniżej demonstrują 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