Przegląd
Użycie mapy na stronie internetowej może wymagać określonych opcji pozwalających kontrolować sposób, w jaki użytkownicy korzystają z mapy w celu jej powiększania i przesuwania. Te opcje, takie jak gestureHandling
, minZoom
, maxZoom
i restriction
, są zdefiniowane w interfejsie MapOptions.
Działanie domyślne
Na poniższej mapie pokazano domyślne działanie interakcji z mapą utworzoną na jej podstawie wyłącznie z 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, });
Kontrolowanie obsługi gestów
Gdy użytkownik przewija stronę zawierającą mapę, przewijanie może przypadkowo spowodować powiększenie mapy. Tą funkcją można sterować za pomocą opcji mapy gestureHandling.
Obsługa gestów: cooperative
Poniższa mapa korzysta z opcji gestureHandling o wartości cooperative
, co umożliwia użytkownikowi normalne przewijanie strony bez jej powiększania i przesuwania. Użytkownicy mogą powiększać mapę, klikając elementy sterujące powiększeniem. Mogą też powiększać i przesuwać mapę, poruszając 2 palcami po mapie w przypadku urządzeń 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 parametrem gestureHandling ustawionym na cooperative
, ponieważ wszystkie mapy na tej stronie znajdują się w regionie <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 obrębie <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 parametrem gestureHandling ustawionym na greedy
. Ta mapa reaguje na wszystkie gesty dotykowe i zdarzenia przewijania (inne niż 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, musisz mieć 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, });
Na mapie poniżej pokazano kombinację elementów gestureHandling i zoomControl w powyższym kodzie.
Ograniczanie granic i powiększenia map
Być może warto zezwolić na sterowanie za pomocą gestów i powiększenia, ale ograniczyć mapę do określonych granic lub minimalnego i maksymalnego powiększenia. Aby to zrobić, możesz ustawić opcje restriction, minZoom i maxZoom. Poniższy kod i mapa prezentują 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, }, }, });