react-google-maps: не могу получить границы

У меня есть следующий компонент реакции, который загружает GoogleMap из библиотеки react-google-maps. Я следую примерам из документации, но получаю значение undefined из функции 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)' }} />
                } />
        )
    }
}

заранее спасибо


person Nathan Horrigan    schedule 30.04.2017    source источник


Ответы (1)


вы можете использовать onIdle, чтобы убедиться, что карта полностью готова

<GoogleMap ref={props.onMapLoad} ... onIdle={props.onMapIdle} > ... </GoogleMap>

а также

<GettingStartedGoogleMap onMapIdle={ ()=> { console.log('map is ready') } } ... />

person Max Gram    schedule 02.05.2017
comment
Так как же здесь вызвать функцию getBounds? - person RezKesh; 18.11.2018