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

19

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?

— Jandroide
fonte

27

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

— Ilja Zverev
fonte

Obrigado :) Comecei um comentário para isso, mas ficou muito grande, então responda abaixo .

— Danwild 15/09/16

13

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

— danwild
fonte

1

Usar focus/ blurdefinitivamente torna a funcionalidade do mapa muito mais intuitiva.

— doublesharp

Acordado. A abordagem de foco / desfoque é ótima. Obrigado!

— Sstringer 12/08/19

Ótimo, mas precisa de um meio para desativar a rolagem se o mapa estiver em tela cheia e o usuário entrar e sair em rápida sucessão (fazendo várias alterações direcionais em um segundo). Essa rolagem confusa para cima e para baixo ocorre quando eles estão presos e não pode sair do mapa do navegador completo para acessar o conteúdo acima ou abaixo dele.

— Loren

6

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 .

— user3276552
fonte

0

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

— ofir_aghai
fonte