html - 谷歌地图重叠到下面的 div 上

Question

我试图在两个 div 之间显示 Google map ，但 map 似乎与它下面的 div 重叠。我在组件上尝试了一堆样式，但它不想占用全部空间并且总是与下一部分重叠。这可能是因为包中组件中的 div 未被覆盖，这些问题可能会引用它:

• > https://github.com/fullstackreact/google-maps-react/pull/208
• > https://github.com/fullstackreact/google-maps-react/issues/298
• > https://github.com/fullstackreact/google-maps-react/issues/335

查看我的代码沙箱以获取完整示例:https://codesandbox.io/s/compassionate-wildflower-zkt8b

希望找到一个快速解决这个问题的方法，我觉得它的普遍性不应该这么困难，所以也许我遗漏了一些东西。任何帮助，谢谢!

Answer 1

试试这个:

class SimpleMap extends Component {
  constructor(props) {
    super(props);

    // Filling our parent container
    this.state = {
      mapStyles: {
        width: "100%",
        height: "100%"
      }
    };
  }

  render() {
    return (
      // Wrapping your component on a relative div container with the desired size
      <div style={{ position: 'relative', width: '100vw', height: '40vh' }}>
        <Map
          google={this.props.google}
          zoom={15}
          style={this.state.mapStyles}
          initialCenter={{ lat: 40, lng: -80 }}
        >
          <Marker position={{ lat: 40, lng: -80 }} />
        </Map>
      </div>
    );
  }
}

更新代码 here .