亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 react-google-maps 組件上自動調整高度

在 react-google-maps 組件上自動調整高度

開心每一天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 回答

?
慕哥6287543

TA貢獻1831條經驗 獲得超10個贊

如果您知道導航欄的確切高度,您可以使用 CSS屬性(此處calc的文檔)。

使用 calc 屬性,您可以將地圖容器設置為等于這樣的內容

height: calc(100vh - navbarHeight)

如果您不知道導航欄的高度,您可以使用 flex 將地圖容器拉伸到剩余的 App 空間。


查看完整回答
反對 回復 2022-05-26
?
明月笑刀無情

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>

)


查看完整回答
反對 回復 2022-05-26
  • 2 回答
  • 0 關注
  • 184 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號