Faltblatt Mausrad Zoom erst nach Anklicken der Karte

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?

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();
    }
  });

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(); });

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 .

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();});