Leaflet 鼠标悬停时显示弹出窗口并显示鼠标位置

Question

我正在使用 Leaflet 将我的几何位置显示在地图上。现在我的弹出框已经正常工作，但是当你将鼠标悬停在它们上面时，弹出框的位置通常是在线条/字符串的中间，而不是在鼠标位置。是否可能将其更改为鼠标位置，以便地图不会突然移动到另一个位置？

我使用的 Leaflet 代码如下：

function addPopup(feature, layer) {
    var popupContent = feature.properties.name;
    layer.bindPopup(popupContent);

    layer.on('mouseover', function (e) {
        this.openPopup();
    });
    layer.on('mouseout', function (e) {
        this.closePopup();
    });
}

- MrAndre

---

弹出窗口上有一个“偏移量”选项，可能会有所帮助。 - peeebeee

你可能会对使用Leaflet工具提示感兴趣。请参见https://dev59.com/4VkS5IYBdhLWcg3we26Z#39770975?r=SearchResults#39770975 - ghybs

Answer 1

在@Falke Design指出您可以将latlng坐标传递给openPopup函数后，我制作了更干净的代码版本：

function addPopup(feature, layer) {
    var popupContent = feature.properties.name;
    layer.bindPopup(popupContent);

    layer.on('mouseover', function (e) {
        this.openPopup(e.latlng);
    });
    layer.on('mouseout', function (e) {
        this.closePopup();
    });
}

- MrAndre

Answer 2

你可以将鼠标位置转换为经纬度并在那里设置弹出窗口。

layer.on('mouseover', function (e) {
        var p = L.point([e.originalEvent.clientX,e.originalEvent.clientY])
        var latlng = mymap.containerPointToLatLng(p);
        this.openPopup(latlng)
    });
layer.on('mousemove', function(e){
    var p = L.point([e.originalEvent.clientX,e.originalEvent.clientY])
        var latlng = mymap.containerPointToLatLng(p);
        this.openPopup(latlng)
})
    layer.on('mouseout', function (e) {

- Falke Design