Question

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

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

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

有人可以帮忙，谢谢。

Answer 1

Leaflet Marker object可通过event.target和mouseover事件的mouseout属性进行访问，因此可以像这样打开/关闭弹出窗口：

<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>

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

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

2 个答案: