如何在react原生地图上显示Json标记？

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

class MapWithJsonMarkers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [] // 存储JSON标记的数组
    };
  }

  componentDidMount() {
    // 从服务器获取JSON数据
    fetch('https://example.com/markers.json')
      .then(response => response.json())
      .then(data => {
        this.setState({ markers: data });
      });
  }

  render() {
    const { markers } = this.state;

    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="..."
        />
        {markers.map(marker => (
          <Marker key={marker.id} position={[marker.lat, marker.lng]}>
            <Popup>
              <div>
                <h2>{marker.title}</h2>
                <p>{marker.description}</p>
              </div>
            </Popup>
          </Marker>
        ))}
      </Map>
    );
  }
}

export default MapWithJsonMarkers;