Листовка колесика мыши масштабируется только после нажатия на карту

19

Я работаю с библиотекой JavaScript Leaflet и прикрепил (рабочую) карту к моему HTML-документу. Он находится в середине страницы, и когда я прокручиваюсь колесиком мыши и прибываю на карту, он автоматически приближается к карте.

Я хочу прокрутить страницу, не останавливаясь на карте. Есть ли способ активировать масштабирование колес только после первого нажатия на карту?

— Jandroide
источник

27

Все просто: создайте L.Map с scrollWheelZoom: falseопцией, затем добавьте слушателя:

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

Если вам нужно переключить масштабирование:

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

— Илья Зверев
источник

Спасибо :) Я начал комментировать для этого, но получил слишком большой, поэтому введите ответ ниже .

— Дэнвильд

13

Больше комментариев / улучшений по компоненту переключения принятого ответа , и это здорово (спасибо). Но.

При взаимодействии с картой для многих случаев использования пользователю также необходимо щелкнуть карту, чтобы выполнить свою задачу, поэтому это:

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

Может привести к неожиданному поведению, когда пользователь действительно начнет использовать карту.

Я бы предложил что-то, что может показаться пользователю более интуитивно понятным - щелкните по карте, чтобы отключить прокрутку мышью .

Например, установите ваш scrollWheelZoom: falseкак выше, тогда:

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

— danwild
источник

1

Использование focus/ blurопределенно делает функциональность карты более интуитивно понятной.

— двойной резкость

Согласовано. Фокус / размытие подход велик. Благодарность!

— sstringer

Отлично, но требуется средство для отключения прокрутки, если карта является полноэкранной, и пользователь выполняет прокрутку быстро и последовательно (делая несколько изменений направления в течение одной секунды). Эта запутанная прокрутка вверх-вниз происходит, когда они застряли и не могут покинуть карту полного браузера для доступа к контенту выше или ниже ее.

— Лорен

6

Leaflet.Sleep облегчит вашу работу, и ее можно будет настраивать

По сути, он отключает события прокрутки, когда они не нужны, и «пробуждает» вашу карту, когда они нужны.

Я бы разместить код, но по умолчанию , кажется , чтобы получить это право, так что вы , вероятно , не будет ничего , кроме нужно , <script src="path/to/leaflet-sleep.js"></script>и вы будете иметь карту , как это .

— user3276552
источник

0

Вы можете сделать это только этими тремя строками:

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

или:

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

— ofir_aghai
источник