Question

我有一个带onclick处理程序的图层：

countriesLayer = L.geoJson(ct, {
    style: myStyle,
    onEachFeature: onEachFeature
})

function onEachFeature(feature, layer) {
    var center = setLabelCenter(layer);
    feature.center = [center.lng, center.lat];
    layer.on({
        click: onFeatureClick,
        mouseover: showMapTip,
    });
}

我还有一个鼠标悬停弹出窗口：

function showMapTip(e) {
    var layer = e.target;
    var content = getInfoContent(layer.feature.properties);
    layerPopup = L.popup({
        autoPan: false
    }).setLatLng(e.latlng).setContent(content).openOn(mymap)
}

问题是onClick事件并不总是被触发。更确切地说，它在大约10％的情况下被解雇。如果我取消弹出，那么它的工作原理。是否有可能解决问题？

Answer 1

通常的问题是您在"mouseover"事件位置的鼠标悬停时打开弹出窗口。在标记的情况下，该位置是标记的坐标，这使得弹出窗口覆盖整个标记，因此鼠标被“取出”标记。

此处您没有"mouseout"侦听器，因此您可能不会注意到此效果。但是鼠标不再在你的原始图层上（它现在在你的弹出窗口中），因此"click"发生在弹出窗口上，而不是在你的图层上。

有时它可能仍然有用，如果你不小心将鼠标稍微移回图层，并且还没有插入新的弹出窗口（无论出于何种原因）

演示：http://playground-leaflet.rhcloud.com/gusu/1/edit?html,output

2种可能的解决方法是：

要在原始图层上绑定弹出窗口，而不是在“鼠标悬停”确切位置的地图上打开它。这样，它会在标记上方打开，或以路径为中心。
使用Tooltip代替弹出窗口，它更适合“鼠标悬停”效果。

示例：http://playground-leaflet.rhcloud.com/zado/1/edit?html,output

Leaflet：使用弹出窗口时，并不总是触发click事件

1 个答案: