Leaflet Label noHide 无指针事件

Posted 2023-02-24

【中文标题】Leaflet Label noHide 无指针事件

【英文标题】：Leaflet Label noHide no pointer event

【发布时间】：2013-11-25 14:26:42

【问题描述】：

我必须在我的地图上添加带有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。

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

【参考方案1】：

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

Forwarding Mouse Events Through Layers

【讨论】：

是的，我已经测试过了，但是 document.elementFromPoint 无法返回地图 kml 元素。

我错过了隐藏 curretn 元素的一点。但我现在有一个 path 或 g 元素。你能从中得到多边形吗？

这是我找到的用于转换路径的功能：whaticode.com/2012/02/01/converting-svg-paths-to-polygons

我的意思是传单多边形。我可以通过传单看到生成 svg 代码，但没有附加事件。

此方法似乎不适用于我的图层数据。

【参考方案2】：

您不需要做更多的事情。

正如Click through a DIV to underlying elements 中所解释的，只要标签的背景是透明的，IE 9 和 10 就会转发事件。 IE 11等浏览器坚持

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

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

【讨论】：

编辑：我刚刚读到 IE 11 也遵守pointer-events:none。这意味着我无法在家用 PC 上检查 IE 的透明度。明天将检查 IE

我需要这个网站兼容 IE 8+ 这个解决方案在它上面不起作用。或者我做错了。

看起来是 IE9 及以上版本。

我可以确认此解决方案不适用于 IE，尤其是当您需要不透明的背景或边框时。

【参考方案3】：

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

我使用 mapbox 库调用 leaflet-pip

详细流程：

检查我所有标签上的点击事件 地图拖动后不要触发点击（我在拖动开始时已经有noclick） 用mouseEventToLatLng(e)获取鼠标Lat Lng 得到这个 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");
        
    
);