Реагируйте и Google Maps с google-maps-реакции, не могу добраться до методов API

Question

Я использую Google-карты-реагировать, и это работает довольно хорошо, но я просто не могу понять, как я могу работать с методами Google Maps API внутри моего компонента. Теперь мне нужно получить границы отрендеренной карты, но я не могу найти способ сделать это. Вот код, любая помощь будет оценена.

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

const GOOGLE_MAPS_JS_API_KEY='AIzaSyB6whuBhj_notrealkey';


class GoogleMap extends React.Component {
constructor() {

    this.state = {
        zoom: 13
    }

    this.onMapClicked = this.onMapClicked.bind(this);
    this.test = this.test.bind(this);
}

onMapClicked (props) {
    if (this.state.showingInfoWindow) {
        this.setState({
            showingInfoWindow: false,
            activeMarker: null
        })
    }
}

test(google) {
// Here i tried a lot of ways to get coords somehow
    console.log(google.maps.Map.getBounds())
}

render() {
    const {google} = this.props;

    if (!this.props.loaded) {
        return <div>Loading...</div>
    }

    return (
        <Map className='google-map'
            google={google}
            onClick={this.onMapClicked}
            zoom={this.state.zoom}
            onReady={() => this.test(google)}
            >
        </Map>
        );
    }
}

export default GoogleApiWrapper({
apiKey: (GOOGLE_MAPS_JS_API_KEY)
})(GoogleMap);

Google Maps Api v 3.30.4

Answer 1

Вы можете попробовать адаптировать свои требования к следующему примеру здесь.

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

Например:

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

const GOOGLE_MAPS_JS_API_KEY='AIzaSyB6whuBhj_notrealkey';


class GoogleMap extends React.Component {
constructor() {

    this.state = {
        zoom: 13
    }

    this.onMapClicked = this.onMapClicked.bind(this);
    this.handleMapMount = this.handleMapMount.bind(this);
}

onMapClicked (props) {
    if (this.state.showingInfoWindow) {
        this.setState({
            showingInfoWindow: false,
            activeMarker: null
        })
    }
}

handleMapMount(mapProps, map) {
    this.map = map;

    //log map bounds
    console.log(this.map.getBounds());
}

render() {
    const {google} = this.props;

    if (!this.props.loaded) {
        return <div>Loading...</div>
    }

    return (
        <Map className='google-map'
            google={google}
            onClick={this.onMapClicked}
            zoom={this.state.zoom}
            onReady={this.handleMapMount}
            >
        </Map>
        );
    }
}

export default GoogleApiWrapper({
apiKey: (GOOGLE_MAPS_JS_API_KEY)
})(GoogleMap);