Ulotka kółko myszy powiększać tylko po kliknięciu mapy

19

Pracuję z biblioteką JavaScript Ulotki i dołączyłem (działającą) mapę do mojego dokumentu HTML. Znajduje się na środku strony, a kiedy przewijam kółkiem myszy w dół i docieram do mapy, automatycznie przybliża mapę.

Chcę przewijać stronę bez zatrzymywania się na mapie. Czy istnieje sposób, aby włączyć zoom koła dopiero po pierwszym kliknięciu mapy?

— Jandroide
źródło

27

To proste: utwórz L.Map z scrollWheelZoom: falseopcją, a następnie dodaj detektor:

map.once('focus', function() { map.scrollWheelZoom.enable(); });

Jeśli chcesz przełączyć powiększanie:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

— Ilja Zverev
źródło

Dzięki :) Zacząłem komentować, ale zrobiłem się za duży, więc odpowiedz poniżej .

— danwild

13

Więcej komentarza / ulepszenia na temat przełączania akceptowanej odpowiedzi , co jest świetne (dzięki). Ale.

Podczas interakcji z mapą w wielu przypadkach użytkownik musi również kliknąć mapę, aby wykonać swoje zadanie, więc:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

Może powodować nieoczekiwane zachowanie, gdy użytkownik zacznie faktycznie korzystać z mapy.

Sugerowałbym coś, co może wydawać się nieco bardziej intuicyjne dla użytkownika - kliknij mapę, aby wyłączyć przewijanie myszy .

Na przykład ustaw swój scrollWheelZoom: falsejak powyżej, a następnie:

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });

— Danwild
źródło

1

Używanie focus/ blurzdecydowanie sprawia, że funkcjonalność mapy jest znacznie bardziej intuicyjna.

— doublesharp

Zgoda. Podejście do ostrości / rozmycia jest świetne. Dzięki!

— sstringer

Świetnie, ale potrzebuje środków, aby wyłączyć przewijanie, jeśli mapa jest pełnoekranowa, a użytkownik przewija się w krótkich odstępach czasu (wprowadzając kilka zmian kierunkowych w ciągu jednej sekundy). To mylone przewijanie w górę i w dół występuje, gdy są one zablokowane i nie mogą opuścić mapy pełnej przeglądarki, aby uzyskać dostęp do zawartości powyżej lub poniżej.

— Loren

6

Ulotka Uśpienie ułatwi ci pracę i jest w pełni konfigurowalna

Zasadniczo wyłącza zdarzenia przewijania, gdy nie są potrzebne, i „budzi” mapę, gdy są one potrzebne.

Będę pisać kod, ale domyślnie wydaje się uzyskać to prawo, więc prawdopodobnie nie będzie musiał niczego poza <script src="path/to/leaflet-sleep.js"></script>i będziesz mieć taką mapę tego .

— użytkownik3276552
źródło

0

Możesz to zrobić tylko tymi 3 liniami:

map.scrollWheelZoom.disable();
map.on('focus', () => { map.scrollWheelZoom.enable(); });
map.on('blur', () => { map.scrollWheelZoom.disable(); });

lub:

map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});

— ofir_aghai
źródło