没问题，我来帮你一步步实现这个功能，结合你现有的代码，咱们分几步来：

1. 加载JSON标记数据 #

首先，咱们需要把JSON里的标记数据获取到组件的state中。你可以在组件的componentDidMount生命周期方法里做这件事——这是组件挂载后获取数据的最佳时机。

假设你的JSON数据格式是这样的（每个标记包含经纬度和显示文本）：

[
  { "lat": -41.26, "lng": 173.3, "text": "市中心" },
  { "lat": -41.24, "lng": 173.1, "text": "火车站" }
]

方式一：从远程接口获取 #

如果你的JSON是放在服务器上的接口，直接用fetch请求：

componentDidMount() {
  fetch('https://your-api-url/markers.json')
    .then(response => response.json())
    .then(markerData => {
      this.setState({ markers: markerData });
    })
    .catch(error => {
      console.error('加载标记数据失败:', error);
    });
}

方式二：导入本地JSON文件 #

如果是本地的JSON文件，直接导入就行：

// 先导入本地JSON
import markerData from './markers.json';

// 然后在componentDidMount里设置state
componentDidMount() {
  this.setState({ markers: markerData });
}

2. 在地图上渲染所有标记 #

接下来，咱们要在GoogleMapReact组件内部，遍历state里的markers数组，把每个标记渲染出来。记得给每个标记组件传递lat和lng属性——这是react-google-maps用来定位标记的关键，还有你需要显示的text。

修改你的render方法：

render() {
  return (
    <div id="nav-map" className='google-map'>
      <GoogleMapReact
        name="map" // 这里你之前写的`name={map}`应该是笔误，改成字符串"map"更合理
        apiKey={'MYAPIKEY'}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
      >
        {/* 遍历标记数组，渲染每个MarkerComponent */}
        {this.state.markers.map((marker, index) => (
          <MarkerComponent
            key={index} // 必须加唯一key，避免React的列表渲染警告
            lat={marker.lat}
            lng={marker.lng}
            text={marker.text}
          />
        ))}
      </GoogleMapReact>
    </div>
  );
}

3. 可选：处理动态更新的标记 #

如果你的JSON数据源会实时变化，你可以在componentDidUpdate里监听数据变化，或者添加一个刷新按钮来重新获取数据。比如：

// 假设你通过props接收数据源地址，当props变化时重新加载
componentDidUpdate(prevProps) {
  if (prevProps.dataUrl !== this.props.dataUrl) {
    fetch(this.props.dataUrl)
      .then(res => res.json())
      .then(data => this.setState({ markers: data }));
  }
}

完整整合后的代码 #

把这些步骤整合起来，你的完整NavMap组件代码应该是这样的：

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

const MarkerComponent = ({ text }) => <div>{text}</div>;

export default class NavMap extends Component {
  constructor(props) {
    super(props);
    this.state = { markers: [] };
  }

  static defaultProps = {
    center: { lat: -41.25, lng: 173.2 },
    zoom: 11
  };

  componentDidMount() {
    // 这里替换成你的JSON数据源地址或者导入本地文件
    fetch('/path/to/your/markers.json')
      .then(res => res.json())
      .then(markerData => this.setState({ markers: markerData }))
      .catch(err => console.error('加载标记出错:', err));
  }

  render() {
    return (
      <div id="nav-map" className='google-map'>
        <GoogleMapReact
          name="map"
          apiKey={'MYAPIKEY'}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          {this.state.markers.map((marker, idx) => (
            <MarkerComponent
              key={idx}
              lat={marker.lat}
              lng={marker.lng}
              text={marker.text}
            />
          ))}
        </GoogleMapReact>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者BaronGrivet