Question

我想获取数据并在react-google-maps上显示

https://tomchentw.github.io/react-google-maps/#googlemap

问题是，为了获取数据，我需要将地图绑定作为查询，并且只在onIdle上获取地图绑定

onIdle = () => {
    console.log('MAP IS READY');
    console.log('GET BOUNDS IN ON IDLE: ', this.mapRef.getBounds());
  }

如果我在onIdle上获取数据，则该组件将更新地图并再次调用onIdle。这会导致不定式循环。

我的问题是，在反应goole映射中获取数据的最佳位置是什么（请注意，我需要映射边界）。或者我只是在onIdle上获取它，并在获取之前检查是否已获取

Answer 1

根据react-google-maps文档，您必须以componentWillMount周期为界。

请在此处react-google-maps

Answer 2

为Google地图添加列表器，我不确定tilesloaded是最好的活动。如果没有，您可以尝试other events。

const map = new google.maps.Map(...)
map.addListener('tilesloaded', () => {
    fetchYourDataHere().then((response) => {
         this.setState({googleMapsData: response})
    });
})

Also react refs may be helpful to get map instance.

取得数据的最佳位置，可对Google地图做出反应

2 个答案: