调整谷歌地图 API 的宽度和高度

Question

我知道还有其他类似的问题，但没有一个帮助解决了我的问题。我正在向我的网站添加谷歌地图，但无法调整宽度和高度。我尝试使用 #map css 属性，我添加了一个容器，但也没有用。当我在浏览器中打开 DevTools 时，似乎有一堆内部样式默认值，使地图设置为覆盖整个页面。我所做的一切似乎都没有改变。还有其他人遇到过这个问题吗，您是如何解决的？

应用程序.js我添加地图的位置

class App extends React.Component{
render() {
    return (
      <div className="google-map">
      <Map
        google={this.props.google}
        zoom={14}
        initialCenter={{ lat: 38.9072, lng: -77.0369 }}
        >
        {this.state.places.map(place => {
          return (
            <Marker
              onClick={this.onMarkerClick}
              name={place.name}
              position={{ lat: place.lat, lng: place.long}}
             />
          )
        })} 
      </Map>     
      </div> 
  )}
}

应用.css

.google-map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
 }
#map {
  position: relative;
  width: 50%; 
 }

Answer 1

也可以通过应用程序实现吗.js看：https://scotch.io/tutorials/react-apps-with-the-google-maps-api-and-google-maps-react

const mapStyles = { 宽度："100%"， 高度："100%"};