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

【问题标题】：Automatic adjust height on react-google-maps component在 react-google-maps 组件上自动调整高度
【发布时间】：2020-07-02 17:39:14
【问题描述】：

我正在尝试使用 react 和谷歌地图构建地图应用程序，我设法创建谷歌地图组件并使用地图，但是，当添加导航栏组件时，我找不到调整地图高度的方法到没有显示滚动条的左侧空间。

导航栏组件来自bootstrap，不知道有没有区别。

地图组件

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;

【问题讨论】：

标签： javascript reactjs google-maps react-hooks react-google-maps

【解决方案1】：

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

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

height: calc(100vh - navbarHeight)

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

【讨论】：

我应该在哪里应用flex 属性？
.App 应该有 display: flex; 然后使用 flex 属性调整每个孩子的大小
请在codeandbox上制作可重现的例子并提供问题中的链接

【解决方案2】：

您可以嵌套弹性盒并定义父弹性盒的高度。
这是我的例子。

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>
)

【讨论】：