Nonaktifkan panning / seret pada peta leaflet untuk div dalam peta

25

Adakah yang tahu bagaimana cara menekan panning ketika Anda mengklik dan menyeret ke atas kotak div yang tertanam di dalam peta itu sendiri?

Misalnya di sini , ketika Anda mengklik dan menyeret dari atas legenda, peta menyeret Anda. Saya ingin menekan fungsi itu. Saya sadar jika teknik ini, tetapi saya ingin tahu apakah ini satu-satunya cara:

map.dragging.disable();
leaflet Tn. Concolato
sumber
Saya telah mengimplementasikan functionaility yang serupa menggunakan jQuery .hover listener (menggunakan handlerIn dan handlerOut untuk menonaktifkan dan mengaktifkan menyeret). Tidak yakin apakah itu pilihan bagi Anda: api.jquery.com/hover
evv_gis

Jawaban:

20

Menggunakan contoh dari situs web Leaflet, catat di mana L.Controlobjek tersebut dipakai sebagai info; ini adalah <div>kotak di kanan atas yang terkait dengan interaksi hover peta. Di sinilah didefinisikan index.htmldari contoh Leaflet:

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

Untuk menonaktifkan seret saat kursor pengguna ada di dalam <div>kotak ini , tambahkan pendengar acara ke HTMLElement( <div>elemen) yang berisi L.Controlobjek:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

Ingat yang mapdidefinisikan sebagai L.Mapcontoh sebelumnya.

Arthur
sumber
Terima kasih @Arthur, saya kenal dengan pendekatan ini. Saya berharap seseorang mungkin menawarkan solusi menggunakan css seperti pada pointer-events: auto atau pointer-events: tidak ada atau sesuatu seperti itu, yang tidak bekerja untuk saya. Jika tidak ada orang lain yang memposting solusi yang lebih baik, saya akan memberi Anda cek, karena itu berarti bahwa itu adalah solusi terbaik.
Tn. Concolato
Saya juga ingin melihatnya. Akan lebih baik jika CSS dapat menyelesaikan masalah ini, tetapi elemen mana yang harus mengatur event pointer-nya? The leaflet-controlunsur yang terkandung oleh leaflet-containerunsur dan yang terakhir menerima peristiwa pointer yang memicu zoom dan panning.
Arthur
Saya telah mencoba untuk meletakkannya di div yang menarik tetapi tidak berhasil.
Tn. Concolato
Ya, dan itu masuk akal: yang <div>menarik adalah anak leaflet-controlyang di dalamnya ada di dalamnya leaflet-container. Peristiwa diterima oleh orang tua ( leaflet-container) sebelum anak ( leaflet-control).
Arthur
19

Solusi alternatif untuk itu adalah menghentikan propagasi acara dengan JavaScript (seperti yang dilakukan untuk kontrol Leaflet, mis. Tombol zoom):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
Ilja Zverev
sumber