React-Leaflet GeoJSON 工具提示出现在两个地方 - 如何修复？

Question

我正在使用 React-Leaflet，并且遇到了 GeoJSON 层中的工具提示问题。我使用 onEachFeature 函数使用带有

sticky: true

的 bindTooltip 向每个功能添加工具提示。工具提示行为与鼠标悬停时的预期相同，出现在鼠标指针上方。但是，当我单击某个要素时，工具提示也会出现在 GeoJSON 要素的中间，这是不希望的。

这是我的代码的简要概述：https://codepen.io/qiun/pen/bGZpzYm

我尝试了各种方法来解决此问题，包括向工具提示添加特定坐标，但似乎没有任何效果。

我已经在 CodePen 上准备了一个演示，其中包含有问题的行为和一些鼠标事件的屏幕截图 和 为了清晰起见

有人可以帮助我理解为什么工具提示在单击时出现在 GeoJSON 功能的中心，并建议一种防止这种情况发生的方法吗？

谢谢！

Answer 1

对于那些正在寻找解决方案的人。您需要使用我手动附加鼠标悬停和鼠标悬停交互的 L.popup({}) 对象。

function GeoJSONComponent({ data }) {
  const onEachFeature = (feature, layer) => {
    if (feature.properties && feature.properties.name) {
      const popupContent = feature.properties.name;

      layer.on("mouseover", function (e) {
        this.bindPopup(popupContent).openPopup(e.latlng);
      });

      layer.on("mousemove", function (e) {
        this.getPopup().setLatLng(e.latlng);
      });

      layer.on("mouseout", function () {
        this.closePopup();
      });
    }
  };

  return (
    <GeoJSON
      data={data}
      onEachFeature={onEachFeature}
      style={() => ({
        color: data.properties.color,
        weight: 3
      })}
    />
  );
}

这消除了“工具提示”元素出现在两个地方的问题。

工作示例：https://codepen.io/qiun/pen/wvOWQKN