javascript - 如何在鼠标悬停时在 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 属性访问，因此可以像这样打开/关闭弹出窗口:

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

Demo