在react js中调整google地图框架的大小

import { GoogleMap, withGoogleMap, withScriptjs } from "react-google-maps";
import { compose, withProps } from "recompose";
import "./Map.css"; // 引入地图样式文件

const Map = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: "100%" }} />,
    containerElement: <div className="map-container" />, // 设置地图容器的样式
    mapElement: <div style={{ height: "100%" }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => (
  <GoogleMap
    defaultZoom={10} // 设置初始缩放级别
    defaultCenter={{ lat: 37.7749, lng: -122.4194 }} // 设置初始中心点坐标
  >
    {/* 在这里添加其他地图组件和标记等 */}
  </GoogleMap>
));

export default Map;

.map-container {
  height: 400px; // 设置地图容器的高度
  width: 100%; // 设置地图容器的宽度
}

import React from "react";
import Map from "./Map";

const App = () => {
  return (
    <div>
      <h1>My Map</h1>
      <Map />
    </div>
  );
};

export default App;