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 />在地图上重叠，就像无法看到上面还有其他组件一样。

我找不到方法将地图适合Grid，应该如何正确放置。

谢谢您的帮助。

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>

反应地图谷歌outsie网格

1 个答案: