Zoom da roda do mouse no folheto somente após clicar no mapa

Estou trabalhando com a Biblioteca JavaScript do Leaflet e anexei um mapa (ativo) ao meu documento HTML. Está no meio da página e, quando estou rolando para baixo com a roda do mouse e chego ao mapa, ele automaticamente amplia o zoom no mapa.

Quero rolar a página sem parar no mapa. Existe uma maneira de ativar o zoom da roda somente após o primeiro clique no mapa?

É simples: crie L.Map com a scrollWheelZoom: falseopção e adicione um ouvinte:

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

Se você precisar alternar o zoom:

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

Mais um comentário / melhoria no componente de alternância da resposta aceita , o que é ótimo (obrigado). Mas.

Ao interagir com um mapa, para muitos casos de uso, o usuário também precisa clicar no mapa para executar sua tarefa, portanto:

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

Pode resultar em algum comportamento inesperado quando o usuário começar a usar o mapa.

Eu sugeriria algo que possa parecer um pouco mais intuitivo para o usuário - clique fora do mapa para desativar a rolagem do mouse .

Por exemplo, defina seu scrollWheelZoom: falsecomo acima, então:

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

O Leaflet.Sleep facilita o seu trabalho e é bastante configurável

Basicamente, desativa os eventos de rolagem quando eles não são necessários e "acorda" seu mapa quando eles são necessários.

Eu postaria o código, mas os padrões parecem acertar, então você provavelmente não precisará de nada além <script src="path/to/leaflet-sleep.js"></script>e terá um mapa como este .

Você pode fazer isso apenas pelas três linhas:

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

ou:

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