在react leaflet地图库上弹出

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

const MapWithPopup = () => {
  const [showPopup, setShowPopup] = useState(false);

  const handleMarkerClick = () => {
    setShowPopup(true);
  };

  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="..."
      />
      <Marker position={[51.505, -0.09]} onClick={handleMarkerClick}>
        {showPopup && (
          <Popup>
            <div>
              <h3>这是一个弹出信息框</h3>
              <p>可以在这里添加任意的文本或其他内容。</p>
            </div>
          </Popup>
        )}
      </Marker>
    </Map>
  );
};

export default MapWithPopup;