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

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?

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();
    }
  });

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(); });

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 .

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();});