如何在鼠标悬停时在 react-leaflet 中切换弹出窗口

Question

我尝试了在 google 上找到的所有内容，但我不知道如何触发弹出窗口。

<Marker
  position={this.props.position}
  onMouseOver={() => { openPopup() }}
  onMouseOut={() => { closePopup() }}
>
  <Popup>
     "HI"
  </Popup>
</Marker>

注意：我知道我无法在那里触发函数 openPopup，它只是为了显示我想在何处实现触发函数以在鼠标悬停时切换弹出窗口。

有人可以帮忙吗，谢谢。

Answer 1

Leaflet Marker object 可通过 mouseover 和 mouseout 事件的 event.target 属性访问，因此弹出窗口可以是 opened/closed，如下所示：

<Marker
    position={position}
    onMouseOver={(e) => {
      e.target.openPopup();
    }}
    onMouseOut={(e) => {
      e.target.closePopup();
    }}
  >
    <Popup>Sydney</Popup>
  </Marker>

Demo

Answer 2

使用 React Leaflet v3，解决方案更简单、更清晰，使用 Tooltip 而不是 Popup，例如：

<Marker position={this.props.position}>
  <Tooltip>I appear on mouse over</Tooltip>
</Marker>

特别是，我发现为 Tooltip 添加 sticky 属性也很有用。 documentation 中有更多工具提示示例，涵盖基本工具提示、粘性工具提示或永久工具提示，带有偏移量等等。

如何在鼠标悬停时在 react-leaflet 中切换弹出窗口

How to toggle popup in react-leaflet on mouse hover

javascript

reactjs

react-leaflet