鼠标悬停 range/distance

Question

有没有办法改变默认的鼠标悬停范围？简单的例子，我有一张地图，上面有一堆宽度为 1-2 像素且可点击的轨道。要单击曲目并显示信息，您需要非常精确地单击，这非常烦人。有什么办法可以改变这种容忍度吗？只是为了说明我的意思，这是我的例子。提前致谢。 http://members.upcpoczta.pl/w.racek/mapa.html

Answer 1

除了增加多段线的权重外，恐怕您对此无能为力。这就是 SVG 的工作方式，非常精确。您还可以做的是删除 dasharray，以减少选择多段线的麻烦。它会导致悬停时出现不规则行为，因为线条之间的间隙不会响应鼠标悬停。悬停时，您会认为自己在线，但实际上并不在线，这也可能非常令人沮丧。看看 Plunker 上的这个测试用例，你就会明白：http://plnkr.co/edit/7WPTWN?p=preview

L.polyline([[0, -180],[0, 180]], {
    'dashArray': [10, 50]
})

有一个解决方案，但它非常粗糙且性能不佳，我不推荐它。对于每条折线，添加另一条具有完全相同坐标的线，使其透明并将权重设置为 10 或更多。将鼠标悬停在透明线上并使用它们的处理程序来更改可见线的样式。代码示例：

var visibleLine = L.polyline([[0, -180],[0, 180]], {
    'weight': 2,
    'opacity': 1,
    'dashArray': 3
}).addTo(map);

var transparentLine = L.polyline([[0, -180],[0, 180]], {
    'weight': 10,
    'opacity': 0
})
.on('mouseover', function (e) {
    visibleLine.setStyle({
        'color': 'red',
        'weight': 4,
        'dashArray': 0
    });
})
.on('mouseout', function (e) {
    visibleLine.setStyle({
        color: 'blue',
        'weight': 2,
        'dashArray': 3
    });
})
.addTo(map);

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/jChoQ0?p=preview

鼠标悬停 range/distance

Mouseover range/distance

hover

leaflet

mouseover