0

我在我的项目中使用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，就像那个 Grid 里面没有任何东西一样。第二个问题是<OTHER_COMPONENT /> 地图上的重叠，就像它看不到上面还有其他一些组件一样。

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

谢谢你的帮助。

4

1 回答 1

4

Map 组件在其中渲染地图，<div style="position: absolute;... 因此您需要将其包装在<div style="position: relative;

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

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

这样您就不需要向 Map 组件添加样式

<Map 
    google={this.props.google} 
    zoom={4}>
</Map>
于 2019-02-11T22:04:48.360 回答