Zoom de la rueda del mouse solo después de hacer clic en el mapa

15

Estoy trabajando con la Biblioteca de JavaScript de folletos y adjunto un mapa (en funcionamiento) a mi documento HTML. Está en el centro de la página, y cuando me desplazo hacia abajo con la rueda del mouse y llego al mapa, este se acerca automáticamente al mapa.

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

    
pregunta Jandroide 27.08.2014 - 12:44

4 respuestas

24

Es simple: crea L.Map con la opción scrollWheelZoom: false , luego agrega 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();
    }
  });
    
respondido por el Ilja Zverev 27.08.2014 - 12:48
9

Más de un comentario / mejora 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:

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 usar el mapa.

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

Por ejemplo, configura tu scrollWheelZoom: false como arriba, luego:

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });
    
respondido por el danwild 15.09.2016 - 03:03
5

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

Básicamente, desactiva los eventos de desplazamiento cuando no son necesarios y "despierta" tu mapa cuando lo es.

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

    
respondido por el user3276552 04.04.2015 - 02:13
0

Puedes 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();});
    
respondido por el ofir_aghai 01.11.2017 - 11:14

Lea otras preguntas en las etiquetas