在 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:&nbsp;calc(100vh&nbsp;-&nbsp;navbarHeight)如果您不知道导航栏的高度，您可以使用 flex 将地图容器拉伸到剩余的 App 空间。

Answer 2

您可以嵌套 flexbox 并定义父 flexbox 的高度。这是我的例子。mapContainerStyleconst mapStyles = {&nbsp; width: '100%',- height: '100vh',+ height: "100%",};APP COMPONENTreturn(&nbsp; <div&nbsp; &nbsp; style={{ height: "100vh", display: "flex", "flex-direction": "column" }}&nbsp; >&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <MapNavbar />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div style={{ "flex-grow": "1" }}>&nbsp; &nbsp; &nbsp; <WrappedMap&nbsp; &nbsp; &nbsp; &nbsp; // your props...&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; </div>)使用 Material UI Box 更简单。APP COMPONENTreturn(&nbsp; <Box display="flex" flexDirection="column" style={{ height: "100vh" }}>&nbsp; <Box>&nbsp; &nbsp; <MapNavbar />&nbsp; </Box>&nbsp; <Box flexGrow={1}>&nbsp; &nbsp; <WrappedMap&nbsp; &nbsp; &nbsp; // your props.../>&nbsp; </Box></Box>)