html - 调整 Google Maps API 的宽度和高度

Question

我知道还有其他类似的问题，但没有一个能帮助解决我的问题。我正在向我的站点添加 Google map ，但无法调整宽度和高度。我试过使用 #map css 属性，我添加了一个容器，但也没有用。当我在浏览器中打开 DevTools 时，似乎有一堆内部样式默认设置可以将 map 设置为覆盖整个页面。我所做的一切似乎都无济于事。有没有其他人有这个问题，你是如何解决的？

我要在其中添加 map 的 App.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

是不是也可以用app.js来实现看: https://scotch.io/tutorials/react-apps-with-the-google-maps-api-and-google-maps-react

const mapStyles = { 宽度:'100%'， 高度:'100%'};