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]
})

有一个解决方案，但它非常hacky和表现我不会推荐它。对于每条折线，添加另一条线，使用完全相同的坐标，使其透明并将重量设置为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

鼠标悬停范围/距离

1 个答案: