我有以下 React 组件,它从“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)' }} />
} />
)
}
}
提前致谢
最佳答案
您可以使用“onIdle”来确保 map 已完全准备就绪
<GoogleMap
ref={props.onMapLoad}
...
onIdle={props.onMapIdle}
>
...
</GoogleMap>
和
<GettingStartedGoogleMap
onMapIdle={ ()=> { console.log('map is ready') } }
...
/>
关于reactjs - react 谷歌地图 : Can't get bounds,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43707612/