Answers:
使用Leaflet网站上的示例,注意将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
实例的情况。
leaflet-control
元素包含在leaflet-container
元素中,后者正在接收触发缩放和平移的指针事件。
<div>
感兴趣的对象是leaflet-control
其内部的子对象leaflet-container
。父级(leaflet-container
)在子级(leaflet-control
)之前接收事件。
一种替代解决方案是使用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);
}