鼠标悬停时的传单显示弹出窗口答案

【问题标题】：Leaflet show popup on hover with the location of the mouse鼠标悬停时的传单显示弹出窗口
【发布时间】：2019-12-05 11:19:57
【问题描述】：

我正在使用传单在地图上显示我的几何位置。现在我的弹出窗口工作正常，但是当你将鼠标悬停在它们上面时，弹出窗口的位置例如在行/字符串的中间，而不是在鼠标的位置。是否可以将其更改为鼠标的位置，以便地图不会突然移动到不同的位置？

我用来在传单中打开弹出窗口的代码如下：

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();
    });
}

【问题讨论】：

弹出窗口上有一个offset 选项可能会有所帮助
您可能对使用 Leaflet 工具提示感兴趣。见stackoverflow.com/questions/39770744/…

标签： javascript popup leaflet

【解决方案1】：

您可以将鼠标点转换为 latlng 并在此处设置弹出窗口。

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) {

【讨论】：

【解决方案2】：

在@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();
    });
}

【讨论】：