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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
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", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
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, }, }, });
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, }, }, });