internet-explorer - Leaflet Label noHide 无指针事件

Question

circleMarker我必须在我的地图上添加自定义城市名称。但我想点击标签，因为它下面有一个多边形有我的 JS 代码添加circleMarker

var ville_label = new L.CircleMarker(
    [lat, lng], 
    { clickable: false, radius: (1/zoom)*12 }
).bindLabel(lib, { noHide: true, className: "leaflet-ville-label" })
.addTo(ville_layer);

在 CSS 中，我禁用了指针事件

.leaflet-ville-label {
    pointer-events: none;
}

但是 IE 不支持pointer-events，并且 Label 是 div 元素而不是 SVG。

有人有解决方案来禁用静态标签上的指针事件吗？

Answer 1

通过层转发鼠标事件可能会帮助您解决此问题。对于 ie 中缺少指针事件，这是一种解决方法。这是关于这个问题的一篇不错的博客文章：

通过层转发鼠标事件

Answer 2

你不需要做更多的事情。

正如通过 DIV 单击底层元素中所述，只要标签的背景是透明的，IE 9 和 10 就会转发事件。IE 11等浏览器坚持

.leaflet-ville-label {
    pointer-events:none;
}

见http://jsfiddle.net/LHL82/7/

Answer 3

我找到了解决方案，但不像我首先想的那样。

我使用mapbox lib调用leaflet-pip

详细程序：

• 检查我所有标签上的点击事件
• 地图拖动后不要触发点击（我已经noclick在拖动开始时）
• 用鼠标获取 Lat LngmouseEventToLatLng(e)
• 得到这个 lat lng 的多边形
• 最后触发点击结果多边形

有我的代码来完成这个：

$(".leaflet-ville-label").off("click").on("click", function(e) {
    if ($(this).hasClass("noclick")) {
        $(".leaflet-ville-label").removeClass("noclick");
        return;
    }
    for (layer_id in kml_layer._layers) {
        var under_layer = leafletPip.pointInLayer(france.mouseEventToLatLng(e), kml_layer._layers[layer_id]);
        if (under_layer.length > 0) {
            under_layer[0].fire("click");
        }
    }
});