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

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

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

Все просто: создайте 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();
    }
  });

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

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

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

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

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

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

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

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