Vô hiệu hóa panning / kéo trên bản đồ tờ rơi cho div trong bản đồ

Có ai biết làm thế nào để ngăn chặn panning khi bạn nhấp và kéo lên trên cùng của hộp div được nhúng trong chính bản đồ không?

Ví dụ ở đây , khi bạn nhấp và kéo lên trên cùng của chú giải, bản đồ sẽ kéo theo bạn. Tôi muốn triệt tiêu chức năng đó. Tôi biết nếu kỹ thuật này, nhưng tôi muốn biết nếu đây là cách duy nhất:

map.dragging.disable();

leaflet

— Ông Concolato
nguồn

Tôi đã triển khai chức năng tương tự bằng cách sử dụng trình nghe jQuery .hover (sử dụng handlerIn và handlerOut để vô hiệu hóa và cho phép kéo). Không chắc chắn nếu đó là một tùy chọn cho bạn: api.jquery.com/hover

— evv_gis

Sử dụng ví dụ từ trang web của tờ rơi, lưu ý nơi L.Controlđối tượng được khởi tạo như info; đây là <div>hộp ở phía trên bên phải được liên kết với tương tác di chuột của bản đồ. Đây là nơi nó được định nghĩa index.htmltừ ví dụ Tờ rơi:

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

Để tắt tính năng kéo khi con trỏ của người dùng ở trong <div>hộp này , hãy thêm trình lắng nghe sự kiện vào HTMLElement(một <div>phần tử) có chứa L.Controlđối tượng:

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

Nhớ lại mapđã được xác định là L.Mapví dụ trước đó.

— Arthur
nguồn

Cảm ơn @Arthur, tôi quen thuộc với phương pháp này. Tôi đã hy vọng ai đó có thể cung cấp một giải pháp bằng cách sử dụng css như trong các sự kiện con trỏ: tự động hoặc sự kiện con trỏ: không có hoặc một cái gì đó giống như những thứ đó, không hoàn toàn phù hợp với tôi. Nếu không có ai khác đăng một giải pháp tốt hơn, tôi sẽ đưa cho bạn kiểm tra, vì điều đó có nghĩa đó là giải pháp tốt nhất.

— Ông Concolato

Tôi muốn thấy điều đó là tốt. Sẽ thật tuyệt nếu CSS có thể giải quyết vấn đề này, nhưng yếu tố nào nên quản lý các sự kiện con trỏ của nó? Phần leaflet-controltử được chứa bởi leaflet-containerphần tử và phần sau sẽ nhận các sự kiện con trỏ kích hoạt thu phóng và xoay.

— Arthur

Tôi đã cố gắng để đưa nó vào div quan tâm không có kết quả.

— Ông Concolato

Vâng, và điều đó có ý nghĩa: sự <div>quan tâm là một đứa trẻ leaflet-controlmà chính nó ở bên trong leaflet-container. Các sự kiện được nhận bởi cha mẹ ( leaflet-container) trước đứa trẻ ( leaflet-control).

— Arthur

Một giải pháp thay thế cho điều đó là dừng lan truyền sự kiện bằng JavaScript (giống như đã thực hiện đối với các điều khiển Tờ rơi, ví dụ: các nút thu phóng):

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
nguồn