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

Question

我正在尝试使用react和google maps构建一个地图应用程序，我设法创建了google maps组件并使用了该地图，但是，当添加导航栏组件时，我找不到将地图的高度调整为没有显示滚动条的剩余空间。

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;

APP组件

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属性（文档here）。

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

height: calc(100vh - navbarHeight)

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