react-google-maps：無法獲得界限

Question

我有下列反應組件，它從'react-google-maps'庫中加載GoogleMap。我遵循這些文檔示例，但是getBounds（）函數未定義。我認爲這是因爲在map完全加載之前嘗試獲取邊界，但找不到解決方案。

@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)' }} /> 
       } /> 
     ) 
    } 
} 

在此先感謝

Answer 1

你可以使用 'ONIDLE'，以確保地圖是完全準備好

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

和

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