Zoom leaflet mouse wheel hanya setelah klik pada peta

19

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?

— Jandroide
sumber

27

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

— Ilja Zverev
sumber

Terima kasih :) Saya memulai komentar untuk ini tetapi terlalu besar jadi jawablah di bawah ini .

— danwild

13

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

— danwild
sumber

1

Menggunakan focus/ blurpasti membuat fungsionalitas peta jauh lebih intuitif.

— doublesharp

Sepakat. Pendekatan fokus / blur itu bagus. Terima kasih!

— sstringer

Hebat, tetapi membutuhkan sarana untuk menonaktifkan gulir jika peta layar penuh dan pengguna gulir masuk dan keluar secara berurutan (membuat beberapa perubahan arah dalam satu detik). Pengguliran atas dan bawah yang membingungkan ini terjadi ketika macet dan tidak dapat meninggalkan peta peramban lengkap untuk mengakses konten di atas atau di bawahnya.

— Loren

6

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 .

— pengguna3276552
sumber

0

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

— ofir_aghai
sumber