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

Question

我正在使用 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 的位置稍有偏差。例如，当鼠标悬停在墨西哥西部太平洋打开的弹出窗口上时，美国。所有弹出窗口都与发生悬停的位置稍有偏差。

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

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

Answer 1

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

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

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

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

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

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