google-maps - 谷歌地图占据了整个屏幕

Question

我正在使用一个库，google-map-react:https://github.com/istarkov/google-map-react

我已按照自述文件中的说明进行操作， map 出现在屏幕上，但默认情况下它会占据整个屏幕，并且我无法更改它。这是我的代码。我尝试过:

 <GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    style={{height: '400px', width: '400px'}}
  >

和

<GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    size={{height: '400px', width: '400px'}}
  >

和

 <GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    style={height: '400px', width: '400px'}
  >

我也尝试过使用百分比而不是硬编码像素。文档没有说明如何设置大小，我该怎么做？我什至尝试将其放入(来自 Bootstrap )内，但它仍然占据整个区域。如何手动设置尺寸？

Answer 1

这里的文档:

• https://github.com/istarkov/google-map-react/blob/master/DOC.md

给出了一个示例，尽管我不清楚如何将其传递给 GoogleMapReact 标记:

{
  center: { lat, lng }, // current map center
  zoom: 4, // current map zoom
  bounds: { nw, se, sw... }, // map corners in lat lng
  size: { width, height... } // map size in px
}

还有这个例子:

• https://jsbin.com/roqutisoqu/1/edit?js,console,output

其中宽度和高度作为 div 上的内联样式提供， map 将在其中渲染:

ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);