React Leaflet -在地图中心对齐弹出窗口

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

class MapWithPopup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      center: [51.505, -0.09], // 初始地图中心位置
      popupContent: '', // 弹出窗口内容
      popupPosition: null, // 弹出窗口位置
    };
  }

  handleClick = (e) => {
    const { lat, lng } = e.latlng;
    this.setState({
      center: [lat, lng], // 将地图中心设置为用户点击的位置
      popupContent: '这是一个弹出窗口', // 设置弹出窗口内容
      popupPosition: e.latlng, // 设置弹出窗口位置为用户点击的位置
    });
  };

  render() {
    const { center, popupContent, popupPosition } = this.state;

    return (
      <Map center={center} zoom={13} onClick={this.handleClick}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {popupPosition && (
          <Marker position={popupPosition}>
            <Popup position={popupPosition}>{popupContent}</Popup>
          </Marker>
        )}
      </Map>
    );
  }
}

export default MapWithPopup;