Sterowanie powiększeniem i przesuwaniem

Wybierz platformę: Android iOS JavaScript

Omówienie

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 nieumyślnie powiększyć mapę. Działaniem tym można sterować za pomocą gestureHandling.

Obsługa gestów: cooperative

Poniższa mapa wykorzystuje ustawioną opcję gestureHandling na cooperative, co pozwala użytkownikowi normalnie przewijać stronę bez jej powiększania lub przesuwać mapę. Użytkownicy mogą powiększać mapę, klikając elementy sterujące powiększeniem. Ta również powiększać i przesuwać dwoma palcami na ekranie dotykowym. urządzenia.

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 trybami greedy i cooperative w zależności od tego, czy mapa jest zawarte w elemencie <iframe>.

Mapa zawarta w lokalizacji <iframe> Zachowanie
tak cooperative
nie greedy

Obsługa gestów: greedy

Mapa z gestureHandlingustawionym na greedy to poniżej. Ta mapa reaguje na wszystkie gesty dotykowe i zdarzenia przewijania w przeciwieństwie do cooperative

Obsługa gestów: 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, są dwie opcje: gestureHandling oraz Musisz uwzględnić 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 gestureHandling oraz zoomControl w kodzie powyżej.

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 minimalnego i maksymalnego powiększenia. W tym celu możesz ustaw ograniczenie, minZoom, i maxZoom. Ten kod i mapa zademonstrować 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