Nonaktifkan interaksi leaflet sementara

20

Bagaimana saya bisa menonaktifkan sementara zoming / draging Mapview di Leaflet.js Sudah mencoba banyak cara tetapi tidak berhasil. Sangat penting untuk membuatnya sementara dan saya juga perlu opsi untuk mengaktifkan kembali.

leaflet Bernhard
sumber
Ada ide bagaimana melakukan ini dengan CSS? Saya perlu menonaktifkan seret di ponsel menggunakan kueri media. Saya mencoba mengatur lapisan transparan di atasnya tetapi mengklik kanan melalui lapisan itu. Saya bahkan bermain dengan pointer-events tetapi tidak berhasil. Pendekatan yang tepat kemungkinan besar melalui penggunaan -webkit-user-drag: tidak ada; tetapi saya telah menerapkannya pada setiap elemen yang dapat saya temukan dan masih belum berhasil. Terima kasih.
Saya menjawab pertanyaan ini di bawah .
hayatbiralem

Jawaban:

33

yang ingin Anda lakukan (dengan asumsi peta Anda adalah panggilan map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

hidupkan lagi dengan 

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';
Calvin
sumber
2
Terima kasih banyak. Saya kelihatan sangat keliru - saya pikir pasti ada satu metode untuk melakukannya.
Bernhard
1
Solusi ini memiliki beberapa masalah: Kursor mouse masih ada di tangan. Pengguliran halaman dengan gerakan sentuh tidak dimungkinkan di atas peta. Ketika pembukaan Popover bergerak peta itu tidak akan pernah kembali.
netAction
@netAction, Apakah Anda punya solusi untuk masalah pengguliran gestur sentuh?
Chris Fremgen
@ChrisFremgen: map.dragging.disable (); melakukan trik agar peta berhenti mengambil gerakan menggulir.
netAction
Apakah ada cara untuk hanya menonaktifkan zoomIn?
howard.D
5

Jika Anda tidak ingin menonaktifkan setiap handler secara manual, Anda dapat mengulang semuanya dan menonaktifkan / mengaktifkannya.

Nonaktifkan

map._handlers.forEach(function(handler) {
    handler.disable();

});

Memungkinkan

map._handlers.forEach(function(handler) {
    handler.enable();

});
ustroetz
sumber
Berhati-hatilah bahwa menggunakan properti non publik (_handlers) dapat menyebabkan kesalahan dalam kode Anda bahkan pada perubahan versi patch leaflet karena tidak dijamin tidak akan berubah. Permintaan fitur harus diserahkan ke selebaran;)
Luckylooke
0

Saya pikir, Anda dapat membungkus peta Anda dengan penolong dan Anda dapat menonaktifkannya dengan kelas CSS sederhana seperti is-locked.

Inilah yang saya bicarakan:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

Saya harap ini membantu.

hayatbiralem
sumber