只有在点击地图后，传单鼠标滚轮才会缩放

我正在使用Leaflet JavaScript库，并在我的HTML文档中附加了一个（有效的）映射。它在页面的中间，当我用鼠标滚轮向下滚动并到达地图时，它会自动放大地图。

我想在页面上滚动而不停在地图上。只有在第一次单击地图后，才可以激活轮式缩放吗？

很简单：创建带有scrollWheelZoom: false选项的L.Map ，然后添加一个侦听器：

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