La rueda del mouse se amplía solo después de hacer clic en el mapa

19

Estoy trabajando con la Biblioteca JavaScript de folleto y adjunté un mapa (de trabajo) a mi documento HTML. Está en el medio de la página, y cuando me desplazo hacia abajo con la rueda del mouse y llego al mapa, se acerca automáticamente al mapa.

Quiero desplazarme por la página sin parar en el mapa. ¿Hay alguna forma de activar el zoom de la rueda solo después del primer clic en el mapa?

— Jandroide
fuente

27

Es simple: cree L.Map con scrollWheelZoom: falseopción, luego agregue un oyente:

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

Si necesita alternar el zoom:

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

— Ilja Zverev
fuente

Gracias :) Empecé un comentario para esto, pero me hice demasiado grande, así que pon la respuesta a continuación .

— danwild

13

Más comentarios / mejoras en el componente de alternancia de la respuesta aceptada , lo cual es genial (gracias). Pero.

Al interactuar con un mapa, para muchos casos de uso, el usuario también debe hacer clic en el mapa para realizar su tarea, por lo que esto:

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

Puede provocar un comportamiento inesperado una vez que el usuario comienza a utilizar el mapa.

Sugeriría algo que puede parecer un poco más intuitivo para el usuario: haga clic en el mapa para desactivar el desplazamiento del mouse .

Por ejemplo, configure su scrollWheelZoom: falsecomo arriba, luego:

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

— danwild
fuente

1

Usar focus/ blurdefinitivamente hace que la funcionalidad del mapa sea mucho más intuitiva.

— doublesharp

Convenido. El enfoque de enfoque / desenfoque es genial. ¡Gracias!

— sstringer

Genial, pero necesita un medio para desactivar el desplazamiento si el mapa está en pantalla completa y el usuario se desplaza hacia adentro y hacia afuera en rápida sucesión (haciendo varios cambios direccionales en un segundo). Este desplazamiento hacia arriba y hacia abajo confuso ocurre cuando están atascados y no pueden salir del mapa del navegador completo para acceder al contenido por encima o por debajo.

— Loren

6

Leaflet.Sleep facilitará su trabajo, y es muy configurable

Básicamente, desactiva los eventos de desplazamiento cuando no son necesarios y "activa" su mapa cuando lo son.

Publicaría el código, pero los valores predeterminados parecen acertar, por lo que es probable que no necesite nada más <script src="path/to/leaflet-sleep.js"></script>y tendrá un mapa como este .

— usuario3276552
fuente

0

Puede hacerlo solo con esas 3 líneas:

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

o:

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

— ofir_aghai
fuente