Leaflet中的点击标记和折线

Question

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

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

- shiin

---

为什么不试一下而非问呢？答案是“是的”，这是在文档中定义的{clickable:false}的行为。 - Dr.Molle

因为在提问之前我已经尝试过了？你的回答是错误的。在我的测试用例中，我有一个可点击的折线对象和一个位于其上方的多段折线对象（有效地突出显示折线的某些部分），但它是不可点击的。当鼠标位于多段折线上方时，您无法通过下面的折线进行点击。 - shiin

在这里：http://jsfiddle.net/dP9aG/19/ - shiin

好的，你是对的，点击事件不会穿过底层的折线，地图会接收到点击事件。 - Dr.Molle

Answer 1

我知道这不是理想的解决方案，但它非常适合我的情况，所以对你也可能有好处。

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

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

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

- Alex

Answer 2

这可能不是你想要的答案，但你可以使用featureGroups将所有可点击的折线移到最前面，以便操作更加明显。

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

更新 fiddle

如果你能提前知道你的代码行，正确的添加顺序也可以使其正常工作。

- hassassin