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

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

你知道弹窗怎么设置在国内总是直接弹出吗？

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

Answer 1

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

在美国的情况下，图层可能是一个包含夏威夷的多面体。这将图层边界移至西南，导致图层“中心”远离墨西哥。

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

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

通常的解决方法是使用 Leaflet Tooltip instead, for which you do not need to implement the mouseover/mouseout stuff yourself. And you can use the sticky option 将其放置在鼠标光标旁边，以摆脱任何中心计算。

If true, the tooltip will follow the mouse instead of being fixed at the feature center.

Leaflet JS Map：MouseOver 上的弹出窗口在错误的位置打开

Leaflet JS Map: Popup on MouseOver opens in incorrect location

javascript

location

leaflet