Deshabilitar la interacción del prospecto temporal

20

¿Cómo puedo deshabilitar temporalmente zoming / draging la Mapview en Leaflet.js? Intenté tantas maneras pero sin suerte. Es importante hacerlo temporal y también necesito la opción para habilitarlo nuevamente.

leaflet Bernhard
fuente
¿Alguna idea de cómo hacer esto con CSS? Necesito deshabilitar el arrastre en el móvil usando una consulta de medios. Intenté establecer una capa transparente encima, pero hace clic a través de esa capa. Incluso jugué con eventos de puntero pero no tuve suerte. El enfoque adecuado es más probable mediante el uso de -webkit-user-drag: none; pero lo he aplicado a todos los elementos que puedo encontrar y todavía no tengo suerte. Gracias.
Respondí esta pregunta a continuación .
hayatbiralem

Respuestas:

33

vas a querer hacer (asumiendo que tu mapa es una llamada map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

enciéndelo de nuevo con 

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';
Calvin
fuente
2
Muchas gracias. Me veía tan mal _ pensé que debía haber un único método para hacerlo.
Bernhard
1
Esta solución tiene algunos problemas: el cursor del mouse sigue siendo una mano. El desplazamiento de página con gestos táctiles no es posible sobre el mapa. Cuando la apertura de un Popover mueve el mapa, nunca retrocederá.
netAction
@netAction, ¿tiene una solución al problema de desplazamiento del gesto táctil?
Chris Fremgen
@ChrisFremgen: map.dragging.disable (); hace el truco de que el mapa deja de buscar gestos de desplazamiento.
netAction
¿Hay alguna manera de desactivar solo zoomIn?
howard.D
5

Si no desea deshabilitar cada controlador manualmente, puede recorrer todos ellos y deshabilitarlos / habilitarlos.

Inhabilitar

map._handlers.forEach(function(handler) {
    handler.disable();

});

Habilitar

map._handlers.forEach(function(handler) {
    handler.enable();

});
ustroetz
fuente
Tenga en cuenta que el uso de propiedades no públicas (_handlers) puede causar un error en su código incluso en los cambios de versión del parche de folleto, ya que no se garantiza que permanezca sin cambios. La solicitud de
funciones
0

Creo que puede envolver su mapa con un contenedor auxiliar y puede deshabilitarlo con una clase CSS simple como is-locked.

Esto es de lo que estoy hablando:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

Espero que ayude.

hayatbiralem
fuente