我有以下反应组件从“反应 - 谷歌地图”加载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)' }} />
} />
)
}
}
提前致谢
答案 0 :(得分:4)
你可以使用&#39; onIdle&#39;确保地图完全准备好
<GoogleMap
ref={props.onMapLoad}
...
onIdle={props.onMapIdle}
>
...
</GoogleMap>
和
<GettingStartedGoogleMap
onMapIdle={ ()=> { console.log('map is ready') } }
...
/>