Zoom leaflet mouse wheel hanya setelah klik pada peta

Saya bekerja dengan Perpustakaan JavaScript Leaflet dan melampirkan peta (berfungsi) ke Dokumen HTML saya. Itu di tengah halaman, dan ketika saya menggulir ke bawah dengan roda mouse saya dan tiba di peta, itu secara otomatis memperbesar ke peta.

Saya ingin menggulir halaman tanpa berhenti di peta. Apakah ada cara untuk mengaktifkan zoom roda hanya setelah klik pertama pada peta?

Sederhana: buat L.Map dengan scrollWheelZoom: falseopsi, lalu tambahkan pendengar:

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

Jika Anda perlu beralih zoom:

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

Lebih banyak komentar / peningkatan pada komponen sakelar dari jawaban yang diterima , yang sangat bagus (terima kasih). Tapi.

Saat berinteraksi dengan peta, untuk banyak kasus penggunaan, pengguna juga perlu mengklik peta untuk melakukan tugasnya, jadi ini:

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

Dapat mengakibatkan beberapa perilaku tak terduga setelah pengguna mulai benar-benar menggunakan peta.

Saya akan menyarankan sesuatu yang mungkin tampak sedikit lebih intuitif bagi pengguna - klik dari peta untuk menonaktifkan gulir mouse .

Misalnya atur scrollWheelZoom: falseseperti di atas, lalu:

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

Leaflet. Tidur akan membuat pekerjaan Anda mudah, dan banyak yang bisa dikonfigurasi

Pada dasarnya, ini mematikan acara gulir ketika tidak diperlukan dan "membangunkan" peta Anda saat itu diperlukan.

Saya akan memposting kode, tetapi standar sepertinya sudah benar, jadi Anda kemungkinan tidak akan memerlukan apa pun di luar <script src="path/to/leaflet-sleep.js"></script>dan Anda akan memiliki peta seperti ini .

Anda dapat melakukannya hanya dengan 3 baris:

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

atau:

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