Reactjs react谷歌地图:Can';我不受限制

Reactjs react谷歌地图:Can';我不受限制,reactjs,google-maps,google-maps-api-3,react-google-maps,Reactjs,Google Maps,Google Maps Api 3,React Google Maps,我有下面的react组件,它从“react google maps”库加载google地图。我在遵循文档示例,但是我从getBounds()函数中得到了未定义的内容。我认为这是因为试图在地图完全加载之前获得边界,但找不到解决方案 @inject("map") @observer export default class Map extends Component { constructor(props) { super(props); } render

我有下面的react组件,它从“react google maps”库加载google地图。我在遵循文档示例,但是我从getBounds()函数中得到了未定义的内容。我认为这是因为试图在地图完全加载之前获得边界,但找不到解决方案

@inject("map") @observer
export default class Map extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const mapStore = this.props.map
        const GettingStartedGoogleMap = withGoogleMap(props => (
            <GoogleMap
                ref={props.onMapLoad}
                style={{
                    height: 100,
                    width: 100,
                }}
                defaultOptions={{ styles: this.mapStyles }}
                defaultZoom={mapStore.zoom}
                defaultCenter={{ lat: mapStore.center.lat, lng: mapStore.center.lng }}>
                {
                    mapStore.markers.map(({ lat, lng }) => {
                        return <Marker
                            position={{ lat, lng }}
                            icon={{
                                url: require('../../images/marker.png')
                            }}
                        />
                    })
                }
            </GoogleMap>
        ))

        return (
            <GettingStartedGoogleMap
                style={{
                    height: 100,
                    width: 100,
                }}
                onMapLoad={(googleMap) => {
                    console.log(googleMap.getBounds())
                }}
                containerElement={
                    <div style={{ height: 'calc(100vh - 70px)' }
                    } />
                }
                mapElement={
                    <div style={{ height: 'calc(100vh - 70px)' }} />
                } />
        )
    }
}
@inject(“map”)@observer
导出默认类映射扩展组件{
建造师(道具){
超级(道具);
}
render(){
const mapStore=this.props.map
const GettingStartedGoogleMap=withGoogleMap(道具=>(
{
mapStore.markers.map({lat,lng})=>{
返回
})
}
))
返回(
{
log(googleMap.getBounds())
}}
集装箱运输={
}
地图元素={
} />
)
}
}

提前感谢

您可以使用“onIdle”确保地图已完全准备就绪


...

{console.log('map is ready')}
...

/>

那么如何在这里校准
getBounds
函数呢?