获取数据的最佳位置反应谷歌地图

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

为谷歌地图添加列表器，我不确定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.