这是我的反应Map组件。
import GoogleMapReact from 'google-map-react';
this.state = {
center: {
lat: 59.95,
lng: 30.33
},
}
<div style={{ height: '100vh', width: '100%', position:"absolute" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "some token" }}
defaultCenter={this.props.center}
defaultZoom={16}
>
</GoogleMapReact>
</div>
但什么都没有渲染。为什么?在github页面文档中,他们说parrent元素必须具有'100vh'的绝对位置,宽度:'100%'。没有显示在页面上。
试试这个
import GoogleMapReact from 'google-map-react'
const SomeText = ({ text }) => <div>{ text }</div>;
<div className='google-map' style={{width:'100%',height:'400px',margin:'auto'}}>
<GoogleMapReact defaultCenter={ this.props.center } defaultZoom={16}>
<SomeText lat={ this.props.center.lat } lng={ this.props.center.lng } text={ 'Here you are?' } />
</GoogleMapReact>
</div>
确保容器元素具有宽度和高度。地图将尝试填充父容器,但如果容器没有大小,则地图将折叠为0宽度/高度。这不是google-map-react的要求,它一般要求google-maps。