Leaflet 中的点击标记和折线答案

【问题标题】：Click-through markers and polylines in LeafletLeaflet 中的点击标记和折线
【发布时间】：2016-07-19 16:51:36
【问题描述】：

在 Leaflet 中，是否可以使用 {clickable:false} 定义标记或折线，以便点击传递到下方的任何内容 - 无论是地图还是可点击的几何对象？

目前，我通过使标记/折线可点击并自己传递事件来解决此问题。但这会导致鼠标光标始终显示为手形符号。理想情况下，鼠标光标应该看起来像普通指针或手，具体取决于标记/折线下方的内容是否可点击。

【问题讨论】：

你为什么不直接尝试而不是询问？答案是“是”，这就是{clickable:false} 的行为，如文档中所定义
因为我在问之前试过了？你的答案是完全错误的。在我的测试用例中，我有一个折线对象，它是可点击的，并且在它的正上方有一个多折线对象（有效地突出显示折线的某些部分），这是不可点击的。当鼠标位于多段线上方时，您无法点击下方的多段线。
给你：jsfiddle.net/dP9aG/19
好吧，你没看错，点击不会经过底层折线，地图会收到点击。

【解决方案1】：

这可能不是您要寻找的答案，但您可以使用 featureGroups 将所有可点击的多段线置于最前面，以便显示操作。

var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();

更新fiddle

此外，如果您有能力事先了解您的行，那么添加行时的正确顺序也将起作用。

【讨论】：

【解决方案2】：

我知道这并不理想，但它很适合我的情况，所以它也可能对你有好处。

这会隐藏图标并在一秒钟后使用mouseenter 和mouseleave 事件将其恢复：

$('.leaflet-marker-icon').mouseenter(function() {
  $(this).hide();
});

$('.leaflet-marker-icon').mouseleave(function() {
  $(this).delay(1000).show(0);
});

【讨论】：