在react-leaflet中悬停图层时显示弹出窗口

import React, { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const Map = () => {
  const [popupContent, setPopupContent] = useState(null);

  const handleMarkerHover = (e) => {
    const marker = e.target;
    setPopupContent(marker.options.popupContent);
    marker.openPopup();
  };

  const handleMarkerLeave = (e) => {
    const marker = e.target;
    setPopupContent(null);
    marker.closePopup();
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[51.505, -0.09]} onMouseOver={handleMarkerHover} onMouseOut={handleMarkerLeave}>
        <Popup>{popupContent}</Popup>
      </Marker>
    </MapContainer>
  );
};

export default Map;