将弹出窗口绑定到多段线以出现在反应传单中的鼠标悬停上

Question

我正在尝试获取在鼠标悬停时打开的折线弹出窗口。

我试过用静态值强制弹出属性的位置道具，但这似乎没有任何影响。我不确定当它绑定到另一个元素时是否可以设置这个值。如果弹出窗口是独立的，它似乎可以工作Code pen here

我知道我可以设置一个函数在鼠标悬停时执行，如此 codepen.

<Polyline positions={positions}
          onMouseOver={(event) => null}
>

但我不确定如何制作与此子组件交互的事件。

正在使用传单 1.4.0 反应传单 2.2.1 反应 16.8.5 反应-dom 16.8.5

Answer 1

为了在将鼠标悬停在折线上时显示弹出窗口，您只需调用

<Polyline
    positions={positions}
    /*What should onMouseOver do?*/
    onMouseOver={e => e.target.openPopup()}>

可选择添加 onMouseOut={e => e.target.closePopup()} 以在悬停后关闭弹出窗口

Demo

Answer 2

我对 Polyline 事件有很大的疑问。

要修复它，请使用：

import "leaflet/dist/leaflet.css";

不要使用：

import 'leaflet-css';

来自包“leaflet-css”：“^0.1.0”

Answer 3

针对最新版本的 React 进行了更新

  <Polyline 
  pathOptions={{
    "color": "#"+Math.floor(Math.random()*16777215).toString(16), //random color
    "weight": 4,
    "opacity": 0.65
  }}positions={p}
  children={<Popup>Henlo </Popup>}      
  eventHandlers={{
    mouseover: (e) => {
      e.target.openPopup()
  },
  mouseout: (e) => {
    e.target.closePopup()
  }}}
  />

将弹出窗口绑定到多段线以出现在反应传单中的鼠标悬停上

Getting popup bound to a polyline to appear onMouseover in react-leaflet

javascript

leaflet

reactjs

react-leaflet