Leaflet JS Map：MouseOver 上的弹出窗口在不正确的位置打开

Posted 2023-04-14

【中文标题】Leaflet JS Map：MouseOver 上的弹出窗口在不正确的位置打开

【英文标题】：Leaflet JS Map: Popup on MouseOver opens in incorrect location

【发布时间】：2022-01-18 03:12:10

【问题描述】：

我正在使用 Leaflet jS 制作地图，除了需要在地图上的国家/地区上悬停时弹出国家/地区名称外，它运行良好。

关于使用以下代码

layer.on(
  mouseover: function over(e) 
    layer.bindPopup(L.popup().setContent(feature.properties.name));
    layer.openPopup();
  ,
  mouseout: function out(e) 
    layer.closePopup();
  ,
);

Country 名称确实会弹出，但它在 int 的位置稍有偏差。例如，当鼠标悬停在墨西哥西部太平洋打开的弹出窗口上时，美国。所有弹出窗口都与发生悬停的位置稍有偏差。

您知道如何将弹出窗口设置为始终直接在国家/地区弹出窗口吗？

提前感谢您对此提供的任何帮助。

【参考方案1】：

虽然没有明确记录，但当您在 ​​Leaflet 路径（矢量）层上 bindPopup 时，它会将弹出提示定位在层“中心”上，即与其边界相比的中间位置。

在美国的例子中，图层可能是一个包含夏威夷的多面体。这会将图层边界向西南方向移动很远，导致图层“中心”远离墨西哥。

您可以为您的用例计算一个更合理的“中心”，并在地图上明确设置弹出位置，而不是将其绑定到图层（中心）。

但是，在某些情况下（通常对于小层），您可能会遇到经典的鼠标悬停弹出窗口闪烁的可用性问题：如果弹出窗口在鼠标下打开，则会触发 mouseout 事件，从而关闭您的弹出窗口。然后触发一个新的 mouseover 事件，这会打开一个新的弹出窗口，等等。

通常的解决方法是改用 Leaflet Tooltip，您不需要自己实现 mouseover/mouseout 的东西。您可以使用sticky option 将其定位在鼠标光标旁边，以摆脱任何中心计算。

如果为 true，则工具提示将跟随鼠标而不是固定在特征中心。

【讨论】：

谢谢@ghybs，到目前为止我还没有使用过标记。标记需要工具提示是正确的。我试过 var marker = L.marker(location); marker.bindTooltip("我的工具提示文本").openTooltip();不采取任何行动。标记上也需要事件吗？谢谢

我不确定我是否理解您的评论？工具提示可用于任何类型的传单图层，而不仅仅是标记。如果您需要帮助，请随时提出新问题。

谢谢@ghybs，这是我的误解。我认为它仅在标记上可用。感谢您的帮助