Fare tekerleği zoom yalnızca haritaya tıkladıktan sonra

Ben ile çalışıyorum Broşür JavaScript Kütüphanesi ve benim HTML belgesi için (çalışma) haritayı ekledi. Sayfanın ortasında ve fare tekerleğim ile aşağı kaydırdığımda ve haritaya geldiğimde otomatik olarak haritayı yakınlaştırıyor.

Haritada durmadan sayfada gezinmek istiyorum. Tekerlek zoomunu yalnızca haritaya ilk tıkladıktan sonra etkinleştirmenin bir yolu var mı?

Çok basit: scrollWheelZoom: falseseçenekle L.Map oluşturun , ardından bir dinleyici ekleyin:

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

Yakınlaştırmayı açmanız gerekiyorsa:

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

Kabul edilen yanıtın açma / kapatma bileşeni hakkında bir yorum / iyileştirme daha fazlası , bu harika (teşekkürler). Fakat.

Bir harita ile etkileşim kurarken, birçok kullanım durumunda kullanıcının görevlerini yerine getirmek için haritayı da tıklaması gerekir, bu nedenle:

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

Kullanıcı gerçekten haritayı kullanmaya başladıktan sonra beklenmedik bir davranışla sonuçlanabilir.

Kullanıcıya biraz daha sezgisel gelebilecek bir şey önerebilirim - fare kaydırmayı devre dışı bırakmak için haritayı tıklayın .

Örneğin scrollWheelZoom: false, yukarıdaki gibi ayarlayın , ardından:

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

Uyku , işinizi kolaylaştıracak ve çok yapılandırılabilir

Temel olarak, kaydırma olaylarını gerekmediklerinde kapatır ve haritanızı gerektiğinde "uyandırır".

Ben kod sonrası istiyorum, ama varsayılan olasılıkla ötesinde bir şey gerekmez, böylece, doğru olsun gibi görünüyor <script src="path/to/leaflet-sleep.js"></script>ve siz gibi bir haritaya sahip olursunuz bu .

Bunu sadece şu 3 satırla yapabilirsiniz:

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

veya:

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