Faltblatt Mausrad Zoom erst nach Anklicken der Karte

19

Ich arbeite mit der Leaflet-JavaScript-Bibliothek und habe meinem HTML-Dokument eine (funktionierende) Karte angehängt. Es befindet sich in der Mitte der Seite und wenn ich mit dem Mausrad nach unten scrolle und auf die Karte komme, zoomt es automatisch in die Karte hinein.

Ich möchte durch die Seite scrollen, ohne auf der Karte anzuhalten. Gibt es eine Möglichkeit, den Radzoom erst nach dem ersten Klick auf die Karte zu aktivieren?

— Jandroide
quelle

27

Es ist ganz einfach: erstelle L.Map mit scrollWheelZoom: falseOption und füge dann einen Listener hinzu:

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

Wenn Sie das Zoomen umschalten müssen:

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

— Ilja Zverev
quelle

Danke :) Ich habe einen Kommentar dazu verfasst, bin aber zu groß geworden, also gib die Antwort unten ein .

— Danwild

13

Eher ein Kommentar / eine Verbesserung der Umschaltkomponente der akzeptierten Antwort , was großartig ist (danke). Aber.

Bei der Interaktion mit einer Karte muss der Benutzer in vielen Anwendungsfällen auch auf die Karte klicken, um die Aufgabe auszuführen.

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

Kann zu unerwartetem Verhalten führen, sobald der Benutzer die Karte tatsächlich verwendet.

Ich würde etwas vorschlagen, das dem Benutzer ein wenig intuitiver erscheint - klicken Sie auf die Karte, um das Scrollen mit der Maus zu deaktivieren .

Stellen Sie zum Beispiel scrollWheelZoom: falsewie oben ein, dann:

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

— Danwild
quelle

1

Durch die Verwendung von focus/ blurwird die Kartenfunktionalität wesentlich intuitiver.

— Doublesharp

Einverstanden. Der Fokus / Unschärfe-Ansatz ist großartig. Vielen Dank!

— Sstringer

Großartig, aber es ist eine Möglichkeit zum Deaktivieren des Bildlaufs erforderlich, wenn die Karte im Vollbildmodus angezeigt wird und der Benutzer schnell hintereinander einen Bildlauf durchführt (wobei innerhalb einer Sekunde mehrere Richtungsänderungen vorgenommen werden). Diese verwirrten Bildläufe nach oben und unten treten auf, wenn sie hängen bleiben und die Voll-Browser-Map nicht verlassen können, um auf Inhalte darüber oder darunter zuzugreifen.

— Loren

6

Leaflet.Sleep erleichtert Ihnen die Arbeit und ist vielseitig konfigurierbar

Grundsätzlich werden Bildlaufereignisse deaktiviert, wenn sie nicht benötigt werden, und die Karte wird "geweckt", wenn sie benötigt wird.

Ich würde Postleitzahl, aber die Standardeinstellungen scheinen es richtig zu machen, so dass Sie wahrscheinlich nichts darüber hinaus benötigen <script src="path/to/leaflet-sleep.js"></script>und Sie werden eine Karte wie diese haben .

— user3276552
quelle

0

Sie können das nur mit diesen 3 Zeilen machen:

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

oder:

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

— ofir_aghai
quelle