Deaktivieren Sie die Flugblattinteraktion vorübergehend

Wie kann ich das Zoomen / Ziehen der Kartenansicht in Leaflet.js vorübergehend deaktivieren? Ich habe es auf so viele Arten versucht, aber ohne Glück. Es ist wichtig, es temporär zu machen und ich brauche auch die Option, um es wieder zu aktivieren.

leaflet

— Bernhard
quelle

Irgendwelche Ideen, wie man das mit CSS macht? Ich muss das Ziehen auf Mobilgeräten mithilfe einer Medienabfrage deaktivieren. Ich habe versucht, eine transparente Ebene darüber zu legen, aber sie klickt direkt durch diese Ebene. Ich habe sogar mit Pointer-Events gespielt, aber kein Glück. Der richtige Ansatz ist am wahrscheinlichsten durch die Verwendung von -webkit-user-drag: none; Aber ich habe das auf jedes Element angewendet, das ich finden kann, und immer noch kein Glück. Vielen Dank.

Ich habe diese Frage unten beantwortet .

— Hayatbiralem

Antworten:

du wirst es tun wollen (vorausgesetzt deine Karte ist ein Anruf 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';

schalten sie es wieder mit ein

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
quelle

Vielen Dank. Ich sah so falsch aus, dachte, es muss eine einzige Methode geben, um das zu tun.

— Bernhard

Diese Lösung hat einige Probleme: Der Mauszeiger ist immer noch eine Hand. Das Blättern mit Berührungsgesten über die Karte ist nicht möglich. Wenn das Öffnen eines Popovers die Karte verschiebt, wird sie niemals zurückgeschwenkt.

— netAction

@netAction, Haben Sie eine Lösung für das Problem des Bildlaufs mit Touch-Gesten?

— Chris Fremgen

@ChrisFremgen: map.dragging.disable (); Bewirkt den Trick, dass die Karte keine Bildlaufbewegungen mehr abruft.

— netAction

Gibt es eine Möglichkeit, ZoomIn nur zu deaktivieren?

— Howard.

Wenn Sie nicht jeden Handler manuell deaktivieren möchten, können Sie alle Handler in einer Schleife ausführen und sie deaktivieren / aktivieren.

Deaktivieren

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

});

Aktivieren

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

});

— ustroetz
quelle

Beachten Sie, dass die Verwendung nicht öffentlicher Eigenschaften (_handlers) zu Fehlern in Ihrem Code führen kann, auch wenn sich die Version des Flugblatt-Patches ändert, da nicht garantiert wird, dass sie unverändert bleibt. Feature-Anfrage sollte an die Broschüre eingereicht werden;)

— Luckylooke

Ich denke, Sie können Ihre Map mit einem Helfer-Container umschließen und Sie können sie mit einfachen CSS-Klassen wie deaktivieren is-locked.

Hier ist, wovon ich rede:

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

Ich hoffe, es hilft.

— hayatbiralem
quelle