Question

我有一个react-google-maps项目，可以创建一个地图：

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
  }
  render() {
    return (<div id="nav-map" className='google-map'>
    <GoogleMapReact 
      name={map} 
      apiKey={'MYAPIKEY'} 
      defaultCenter={this.props.center} 
      defaultZoom={this.props.zoom}>
      <MarkerComponent lat={-41.25} lng={173.2} text={'Centre'}/>
    </GoogleMapReact>
    </div>)
  }
}

这会在地图中心添加文字标记。

但是我无法工作如何在React中创建/加载地图后加载的动态JSON提要中添加标记。请注意，JSON提要可以更新 - 此时标记将被刷新。

在React中我通常会调用这样的JSON提要：

componentDidMount() {
  fetch('/myJSONfeed').then(response => response.json()).then(data => {
    this.setState({data});
  });
 }

我已经很好地浏览了一个解决方案，但是在创建/加载地图后无法弄清楚如何添加动态标记。

任何想法或示例代码都将受到赞赏。

Answer 1

我最近遇到了相同的问题。希望这种解释可以帮助您找出问题所在。

概述

当我们使用外部资源时。重要的是要注意，没有任何东西可以保证您执行任务的顺序。就像您的情况一样，获取JSON提要是异步获取的。

问题

在componentDidMount（）内部获取提要应该没问题。但是，您仍然需要等待数据可用。因此，您应该告诉其他组件侦听该事件，然后再更新其属性。

解决方案

通过使用componentDidMount（），我们可以等待地图加载以及属性传播到组件中。然后，使用componentDidUpdate（）我们可以在DOM上进行操作。

它是这样的：

在App.js中：

    componentDidMount(){
        fetch(THE_SOURCE_TO_BE_FETCHED)
        .then(function(response) {
            return response.json();
        }).then(data => {
            this.setState({markers: data});
        });
    }

在“地图”组件中

    componentDidUpdate(){
        const google = window.google;

        this.map = new google.maps.Map(this.refs.map, {
            center: this.props.center,
            zoom: 4
        });

        this.createMarkers(this.props.markers)
    }

    createMarkers(users){
        const google = window.google;

        users.map(user => {
            this.marker = new google.maps.Marker({
                position: {
                    lat: user.location.latitude,
                    lng: user.location.longitude
                },
                map: this.map,
            });
            this.state.markers.push(this.marker);
        })
    }

请注意：，您应该仔细检查JSON并检查其是否有效，以及是否可以从字符串等中解析它。

如果需要更多详细信息，请浏览React的docs中的React组件生命周期。

GL和HF

如何将存储在JSON Feed中的地图标记添加到现有的React Google Map？

1 个答案:

概述

问题

解决方案