開心每一天1111
2022-05-26 17:48:38
我正在嘗試使用 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;
2 回答

明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
您可以嵌套 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>
)
添加回答
舉報
0/150
提交
取消