Korzystam z Google Maps API (v3), aby narysować kilka map na stronie. Jedną z rzeczy, które chciałbym zrobić, jest wyłączenie powiększania po przewinięciu kółka myszy nad mapą, ale nie jestem pewien, jak to zrobić.
Wyłączyłem funkcję scaleControl (tj. Usunąłem element interfejsu skalowania), ale nie zapobiega to skalowaniu kółka przewijania.
Oto część mojej funkcji (jest to prosta wtyczka jQuery):
$.fn.showMap = function(options, addr){
options = $.extend({
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);
// Code cut from this example as not relevant
};
jquery
google-maps
google-maps-api-3
jquery-plugins
aaronrussell
źródło
źródło
Odpowiedzi:
W wersji 3 interfejsu API Map Google możesz po prostu ustawić
scrollwheel
opcję false w właściwościach MapOptions :Jeśli korzystasz z wersji 2 interfejsu API Maps, musiałbyś użyć wywołania API disableScrollWheelZoom () w następujący sposób:
scrollwheel
Zoom jest domyślnie włączona w wersji 3 API Maps, ale w wersji 2 jest wyłączona, chyba że wyraźnie włączony zenableScrollWheelZoom()
wywołania API.źródło
disableDefaultUI: true
może zastąpićnavigationControl: false, mapTypeControl: false, scaleControl: false
Kod Daniela spełnia swoje zadanie (wielkie dzięki!). Ale chciałem całkowicie wyłączyć powiększanie. Odkryłem, że musiałem użyć wszystkich czterech z tych opcji:
Zobacz: Specyfikacja obiektu MapOptions
źródło
scrollwheel
musi być napisane małymi literami (po prostu złapałem mnie, podnosząc W)Na wypadek, gdybyś chciał to zrobić dynamicznie;
Czasami musisz pokazać coś „złożonego” na mapie (lub mapa jest niewielką częścią układu), a to powiększanie przewijania znajduje się w środku, ale gdy masz czystą mapę, ten sposób powiększania jest przyjemny.
źródło
Nie komplikuj! Oryginalna zmienna map Google, żadnych dodatkowych rzeczy.
źródło
Na dzień dzisiejszy (październik 2017 r.) Google wdrożył specjalną właściwość do obsługi powiększania / przewijania, zwaną
gestureHandling
. Jego celem jest obsługa działania urządzeń mobilnych, ale modyfikuje również zachowanie przeglądarek stacjonarnych. Oto z oficjalnej dokumentacji :Krótko mówiąc, możesz łatwo zmusić ustawienie do „zawsze powiększania” (
'greedy'
), „nigdy'none'
powiększania” ('cooperative'
) lub „użytkownik musi nacisnąć CRTL / ⌘, aby włączyć zoom” ( ).źródło
Stworzyłem bardziej rozwiniętą wtyczkę jQuery, która pozwala zablokować lub odblokować mapę za pomocą ładnego przycisku.
Ta wtyczka wyłącza ramkę iframe Google Maps z przezroczystym div div nakładki i dodaje przycisk odblokowania. Musisz nacisnąć przez 650 milisekund, aby go odblokować.
Możesz zmienić wszystkie opcje dla swojej wygody. Sprawdź to na https://github.com/diazemiliano/googlemaps-scrollprevent
Oto przykład.
źródło
Edit in JSFiddle Result JavaScript HTML CSS
” jest naprawdę częścią kodu?W moim przypadku kluczowe było
'scrollwheel':false
zainicjowanie init. Uwaga: używamjQuery UI Map
. Poniżej znajduje się nagłówek mojej funkcji inicjującej CoffeeScript :źródło
Na wszelki wypadek korzystasz z biblioteki GMaps.js , co sprawia, że nieco łatwiej jest robić takie rzeczy jak Geokodowanie i niestandardowe piny, oto jak rozwiązać ten problem, korzystając z technik wyuczonych z poprzednich odpowiedzi.
źródło
Dla kogoś, kto zastanawia się, jak wyłączyć JavaScript Google Maps API
Będzie ona umożliwić zwój powiększanie jeśli klikniesz mapę raz. I wyłącz po wyjściu z div div myszy.
Oto przykład
źródło
Musisz tylko dodać w opcjach mapy:
źródło
Proste rozwiązanie:
Źródło: https://github.com/Corsidia/scrolloff
źródło
Wystarczy, że ktokolwiek jest zainteresowany czystym rozwiązaniem css do tego. Poniższy kod nakłada przezroczysty div na mapę i po kliknięciu przesuwa przezroczysty div za mapę. Nakładka zapobiega powiększaniu, po kliknięciu, a za mapą włączane jest powiększanie.
Zobacz mój wpis na blogu Mapy Google przełączają zoom za pomocą css, aby uzyskać wyjaśnienie, jak to działa, a pióro codepen.io/daveybrown/pen/yVryMr aby uzyskać działającą wersję demonstracyjną.
Oświadczenie: służy głównie do nauki i prawdopodobnie nie będzie najlepszym rozwiązaniem dla stron produkcyjnych.
HTML:
CSS:
źródło
Użyj tego fragmentu kodu, który da Ci pełną kontrolę nad kolorem i mapą Google. ( scaleControl: false i scrollwheel: false zapobiegnie powiększaniu lub zmniejszaniu kółka myszy)
źródło
Robię to z tymi prostymi przykładami
jQuery
CSS
Lub użyj opcji gmap
źródło