反应地图 google 外网

Question

我在我的项目中使用 google-maps-react。在我页面的一侧，我想放地图。为了分隔内容，我正在使用 Grid，我的网站看起来像这样

  render() {
   return (    
    <Grid container spacing={8}>
      <Grid item sm={7}>Some content here</Grid>
       <Grid item sm={5}>
         <Grid container spacing={8}>
           <Grid item sm={12}> <MAPCONTAINER /> </Grid>
           <Grid item sm={12}> <OTHER_COMPONENT /> </Grid>
         </Grid>
       </Grid>
     </Grid>
   )}

<MAPCONTAINER /> 看起来像这样

const style = {
  width: '100vw',
  weight: '100hx',
}

class MapContainer extends Component { 
  render() {
    return (
      <Map 
        google={this.props.google} 
        zoom={4}
        style = {style}
        >
      </Map>      
    );
  }
}

export default GoogleApiWrapper({
    apiKey: (GOOGLE_KEY)
  })(MapContainer)

有两个问题：一个是地图超出了 Grid ，它很宽，奇怪的是当我检查这个 Grid 元素时，它显示它有 height:0,就像那个网格里面什么都没有。第二个问题是 <OTHER_COMPONENT /> 在地图上重叠，好像看不到上面还有其他组件。

我找不到将地图放入网格的方法，它应该如何正确。

感谢您的帮助。

Answer 1

地图组件在 <div style="position: absolute;... 中呈现地图所以你需要把它包装在 <div style="position: relative;

最简单的方法是添加 position: relative;像这样到网格项目：

<Grid item sm={12} style={{position: 'relative', height: '50vh'}}><MapContainer /></Grid>

这样就不需要给地图组件添加样式了

<Map 
    google={this.props.google} 
    zoom={4}>
</Map>

反应地图 google 外网

react maps google outsie Grid

google-maps

reactjs

material-ui

google-maps-react