Désactiver l'interaction foliaire temporaire

20

Comment puis-je désactiver temporairement le zoming / draging de Mapview dans Leaflet.js J'ai essayé tant de façons mais sans aucune chance. Il est important de le rendre temporaire et j'ai également besoin de la réactiver.

Bernhard
la source
Des idées pour faire ça avec CSS? Je dois désactiver le glissement sur mobile à l'aide d'une requête multimédia. J'ai essayé de placer un calque transparent dessus, mais il clique à travers ce calque. J'ai même joué avec des événements de pointeur mais pas de chance. L'approche appropriée est très probablement basée sur l'utilisation de -webkit-user-drag: none; mais je l'ai appliqué à chaque élément que je peux trouver et toujours pas de chance. Merci.
J'ai répondu à cette question ci-dessous .
hayatbiralem

Réponses:

33

vous allez vouloir faire (en supposant que votre carte est un appel 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';

rallumez-le avec

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
la source
2
Merci beaucoup. Je regardais tellement mal _ pensais qu'il devait y avoir une seule méthode pour le faire.
Bernhard
1
Cette solution a quelques problèmes: le curseur de la souris est toujours une main. Le défilement de page avec des gestes tactiles n'est pas possible sur la carte. Lorsque l'ouverture d'un Popover déplace la carte, elle ne reculera jamais.
netAction
@netAction, avez-vous une solution au problème de défilement des gestes tactiles?
Chris Fremgen
@ChrisFremgen: map.dragging.disable (); fait l'astuce que la carte arrête de chercher les gestes de défilement.
netAction
Existe-t-il un moyen de désactiver uniquement ZoomIn?
howard.D
5

Si vous ne souhaitez pas désactiver manuellement chaque gestionnaire, vous pouvez les parcourir tous et les désactiver / activer.

Désactiver

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

});

Activer

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

});
ustroetz
la source
Attention, l'utilisation de propriétés non publiques (_handlers) peut provoquer des erreurs dans votre code même lors des changements de version des correctifs de dépliants car il n'est pas garanti de rester inchangé. La demande de fonctionnalité doit être soumise au dépliant;)
Luckylooke
0

Je pense que vous pouvez envelopper votre carte avec un conteneur d'assistance et vous pouvez le désactiver avec une classe CSS simple comme is-locked.

Voici de quoi je parle:

.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;
}

J'espère que ça aide.

hayatbiralem
la source