맵 내의 div에 대한 전단지 맵에서 패닝 / 드래깅 비활성화

지도 자체에 포함 된 div 상자를 클릭하고 드래그 할 때 패닝을 억제하는 방법을 아는 사람이 있습니까?

예를 들어, 여기서 범례 상단을 클릭하고 드래그하면지도가 함께 드래그됩니다. 그 기능을 억제하고 싶습니다. 이 기술이 있는지 알고 있지만 이것이 유일한 방법인지 알고 싶습니다.

map.dragging.disable();

leaflet

— 콩 콜라 토 씨
소스

jQuery .hover 리스너를 사용하여 유사한 기능을 구현했습니다 (핸들러를 비활성화하고 활성화하기 위해 handlerIn 및 handlerOut 사용). 그것이 당신을위한 옵션인지 확실하지 않습니다 : api.jquery.com/hover

— evv_gis

Leaflet 웹 사이트 의 예제 를 사용 하여L.Control 객체가 어디에서 인스턴스화 되는지 확인하십시오 info. 이것은 <div>지도의 호버 상호 작용과 관련된 오른쪽 상단 의 상자입니다. 다음은 index.htmlLeaflet 예제에서 정의 된 위치입니다 .

    // 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로 이벤트 전파를 중지하는 것입니다 (예 : 확대 / 축소 버튼과 같은 Leaflet 제어에 대해 수행되는 것처럼).

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

— 일자 즈 베레 프
소스