将JSON文件链接到google- map -react以在地图上显示标记

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

class MapComponent extends Component {
  state = {
    markers: []
  };

  componentDidMount() {
    fetch('path/to/json/file.json')
      .then(response => response.json())
      .then(data => {
        // 解析JSON数据并转换为标记对象数组
        const markers = data.map(item => ({
          lat: item.lat,
          lng: item.lng,
          text: item.text
        }));
        this.setState({ markers });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }

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

    return (
      <div style={{ height: '400px', width: '100%' }}>
        <GoogleMapReact
          defaultCenter={{ lat: 0, lng: 0 }}
          defaultZoom={1}
        >
          {markers.map((marker, index) => (
            <Marker
              key={index}
              lat={marker.lat}
              lng={marker.lng}
              text={marker.text}
            />
          ))}
        </GoogleMapReact>
      </div>
    );
  }
}

const Marker = ({ text }) => (
  <div style={{ position: 'relative', color: 'red', fontWeight: 'bold' }}>
    {text}
  </div>
);

export default MapComponent;