リーフレットマウスホイールは、マップをクリックした後にのみズームします

私は働いているリーフレットのJavaScriptライブラリと私のHTMLドキュメントに（作業）の地図を添付します。ページの中央にあり、マウスホイールで下にスクロールして地図に到達すると、自動的に地図が拡大されます。

地図で止まることなくページをスクロールしたい。マップを最初にクリックした後にのみホイールズームを有効にする方法はありますか？

簡単です。scrollWheelZoom: falseオプションでL.Mapを作成し、リスナーを追加します。

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

ズームを切り替える必要がある場合：

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

受け入れられた回答のトグルコンポーネントに関するコメント/改善の詳細、素晴らしい（ありがとう）。だが。

マップを操作する場合、多くのユースケースでは、ユーザーはマップをクリックしてタスクを実行する必要があるため、次のようにします。

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

ユーザーが実際にマップの使用を開始すると、予期しない動作が発生する場合があります。

ユーザーがマップを離れてクリックしてマウスのスクロールを無効にする方が、もう少し直感的に見えるかもしれません。

たとえばscrollWheelZoom: false、上記のように設定すると、次のようになります。

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

Leaflet.Sleepはあなたの仕事を簡単にします、そしてそれは十分に設定可能です

基本的に、スクロールイベントが不要な場合はオフにし、必要な場合はマップを「ウェイク」します。

コードを投稿しますが、デフォルトでは正しく設定されているように見えるので、おそらくそれ以上のものは必要なく<script src="path/to/leaflet-sleep.js"></script>、このようなマップがあります。

あなたはそれらの3行だけでそれを行うことができます：

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

または：

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