react-leaflet 实战：Marker Popup 改成触摸触发

如果你在 Marker 里面加一个 Popup 。

这个东西会自动加一个点击出现的事件。

而我想改成鼠标放上去出现，离开时消失。

 

上代码。（请粘贴到 https://react-leaflet.js.org/ 的编辑器中查看）

const position = [51.505, -0.09]
function DraggableMarker() { 

  const markerRef = useRef(null)
  const popRef= useRef(null)
  const eventHandlers = useMemo(
    () => ({
      mouseover() {
        const marker = markerRef.current        
        marker.openPopup()      
      },
      mouseout() {
        const marker = markerRef.current
        marker.closePopup()
      }
    }),
    [],
  )

  return (
    <Marker ref={markerRef} eventHandlers={eventHandlers} position={position}>
      <Popup ref={popRef} >
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  )
}
        
render(
  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <DraggableMarker />
  </MapContainer>
)

以上。