在地图上的div上禁用在传单地图上的平移/拖动


25

当您单击并拖动嵌入地图本身的div框上方时,是否有人知道如何抑制平移?

例如,在这里,当您单击并拖动到图例上方时,地图将随之拖动。我想取消该功能。我知道这种技术,但我想知道这是否是唯一的方法:

map.dragging.disable();

我已经使用jQuery .hover侦听器(使用handlerIn和handlerOut禁用和启用拖动)实现了类似的功能。不知道这是否适合您: api.jquery.com/hover
evv_gis 2014年

Answers:


20

使用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那样提供解决方案,如指针事件:自动或指针事件:没有或类似的东西,对我来说不太起作用。如果没有其他人发布更好的解决方案,我会给您检查,因为这意味着这是最好的解决方案。
孔可拉托先生2014年

我也希望看到这一点。如果CSS可以解决此问题,那将很好,但是应该管理哪个元素的指针事件?该leaflet-control元素包含在leaflet-container元素中,后者正在接收触发缩放和平移的指针事件。
亚瑟

我一直试图把它放在感兴趣的领域毫无济于事。
孔可拉托先生2014年

是的,这是有道理的:<div>感兴趣的对象是leaflet-control其内部的子对象leaflet-container。父级(leaflet-container)在子级(leaflet-control)之前接收事件。
亚瑟

19

一种替代解决方案是使用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);
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.