ปิดใช้งานการแพน / การลากบนแผนที่แผ่นพับสำหรับ div ภายในแผนที่

ไม่มีใครรู้วิธีระงับการแพนกล้องเมื่อคุณคลิกและลากไปด้านบนของกล่อง div ที่ฝังอยู่ภายในแผนที่หรือไม่

ตัวอย่างเช่นที่นี่เมื่อคุณคลิกและลากไปด้านบนสุดของตำนานแผนที่จะลากไปกับคุณ ฉันต้องการที่จะระงับฟังก์ชั่นนั้น ฉันรู้ว่าเทคนิคนี้ แต่ฉันต้องการทราบว่านี่เป็นวิธีเดียว:

map.dragging.disable();

leaflet

— นายคอนโกลาโต
แหล่งที่มา

ฉันได้ติดตั้ง functionaility ที่คล้ายกันโดยใช้ jQuery .hover listener (ใช้ handlerIn และ handlerOut เพื่อปิดใช้งานและเปิดใช้งานการลาก) ไม่แน่ใจว่าเป็นตัวเลือกสำหรับคุณหรือไม่: api.jquery.com/hover

— evv_gis

คำตอบ:

โดยใช้ตัวอย่างจากเว็บไซต์ใบปลิวทราบที่L.Controlวัตถุถูกสร้างเป็นinfo; นี่คือ<div>กล่องที่มุมขวาบนที่สัมพันธ์กับการโต้ตอบแบบโฮเวอร์ของแผนที่ นี่คือที่ที่มันถูกกำหนดในindex.htmlจากตัวอย่างของ 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);

หากต้องการปิดการใช้งานการลากเมื่อเคอร์เซอร์ของผู้ใช้อยู่ใน<div>กล่องนี้ให้เพิ่มฟังเหตุการณ์HTMLElement( <div>องค์ประกอบ) ที่มีL.Controlวัตถุ:

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

เรียกคืนที่mapถูกกำหนดเป็นL.Mapอินสแตนซ์ก่อนหน้านี้

— อาร์เธอร์
แหล่งที่มา

ขอบคุณ @Arthur ฉันคุ้นเคยกับวิธีการนี้ ฉันหวังว่าบางคนอาจเสนอวิธีแก้ปัญหาโดยใช้ css เช่นเดียวกับตัวชี้เหตุการณ์: อัตโนมัติหรือตัวชี้เหตุการณ์: ไม่มีหรืออะไรอย่างนั้นที่ไม่ได้ผลสำหรับฉัน หากไม่มีใครโพสต์ทางออกที่ดีกว่าฉันจะให้คุณตรวจสอบเพราะมันจะหมายความว่าเป็นทางออกที่ดีที่สุด

— Mr. Concolato

ฉันควรจะเห็นเช่นกัน มันจะดีถ้า CSS สามารถแก้ปัญหานี้ได้ แต่องค์ประกอบใดควรมีเหตุการณ์ตัวชี้จัดการ? leaflet-controlองค์ประกอบที่มีอยู่โดยleaflet-containerองค์ประกอบและหลังได้รับเหตุการณ์ที่ชี้ว่ามีการเรียกซูมและปรากฎว่า

— Arthur

ฉันได้พยายามที่จะใส่มันในส่วนที่น่าสนใจไม่มีประโยชน์

— Mr. Concolato

ใช่และความรู้สึกที่ทำให้ที่: <div>ที่น่าสนใจคือลูกของที่ตัวเองเป็นอยู่ภายในleaflet-control leaflet-containerผู้ปกครองได้รับกิจกรรม ( leaflet-container) ก่อนเด็ก ( leaflet-control)

— Arthur

อีกทางเลือกหนึ่งคือหยุดการเผยแพร่เหตุการณ์ด้วย JavaScript (เช่นเดียวกับที่ทำกับการควบคุมแผ่นพับเช่นปุ่มซูม):

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
แหล่งที่มา