在 react-google-maps 组件上自动调整高度

Question

我正在尝试使用 react 和谷歌地图构建地图应用程序，我设法创建谷歌地图组件并使用地图，但是，当添加导航栏组件时，我找不到将地图高度调整到空间的方法左侧没有显示滚动条。Navbar 组件来自引导程序，我不知道它是否有所作为。地图组件import React from 'react';import { GoogleMap, withScriptjs, withGoogleMap } from 'react-google-maps';const INIT_VALUES = {  initialZoom: 10,  center: { lat: -27.593500, lng: -48.558540 },};function Map() {  return (    <GoogleMap      defaultCenter={INIT_VALUES.center}      defaultZoom={INIT_VALUES.initialZoom}    />  );}const WrappedMap = withScriptjs(withGoogleMap(Map));export default WrappedMap;应用程序组件import React, { useEffect } from 'react';import MapNavbar from './components/navbar/index';import WrappedMap from './components/map/index';import './App.css';const MAP_KEY = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=******';const mapStyles = {  width: '100%',  height: '100vh',};async function fetchData(callback) {  const response = await fetch('http://localhost:5000/');  const data = await response.json();  callback(data);}function App() {  useEffect(() => {    fetchData((a) => console.log(a));  }, []);  return (    <div className="App">      <MapNavbar />      <div style={mapStyles}>        <WrappedMap          googleMapURL={MAP_KEY}          loadingElement={<div style={{ height: '100%' }} />}          containerElement={<div style={{ height: '100%' }} />}          mapElement={<div style={{ height: '100%' }} />}        />      </div>    </div>  );}export default App;

Answer 1

如果您知道导航栏的确切高度，您可以使用 CSS属性（此处calc的文档）。

使用 calc 属性，您可以将地图容器设置为等于这样的内容

height: calc(100vh - navbarHeight)

如果您不知道导航栏的高度，您可以使用 flex 将地图容器拉伸到剩余的 App 空间。

Answer 2

您可以嵌套 flexbox 并定义父 flexbox 的高度。

这是我的例子。

mapContainerStyle

const mapStyles = {

  width: '100%',

- height: '100vh',

+ height: "100%",

};

APP COMPONENT

return(

  <div

    style={{ height: "100vh", display: "flex", "flex-direction": "column" }}

  >

    <div>

      <MapNavbar />

    </div>

    <div style={{ "flex-grow": "1" }}>

      <WrappedMap

        // your props...

      />

    </div>

  </div>

)

使用 Material UI Box 更简单。

APP COMPONENT

return(

  <Box display="flex" flexDirection="column" style={{ height: "100vh" }}>

  <Box>

    <MapNavbar />

  </Box>

  <Box flexGrow={1}>

    <WrappedMap

      // your props...

/>

  </Box>

</Box>

)