我无法在我的 React 应用程序中减小由 google-maps-react 制作的 Google Maps 组件的大小

Question

Map组件下的样式正在减小嵌入在组件内的地图的大小，而不是实际组件本身。 这在屏幕截图中会更清楚。 我故意写了style={{ width: '10%', height: '10%'}}来表明即使我将尺寸缩小很多，组件仍然保持相同的尺寸。

代码：

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
var config = require("../config/config").default();
export class GoogleMap2 extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        stores: [{lat: 47.49855629475769, lng: -122.14184416996333},
                {latitude: 47.359423, longitude: -122.021071},
                {latitude: 47.2052192687988, longitude: -121.988426208496},
                {latitude: 47.6307081, longitude: -122.1434325},
                {latitude: 47.3084488, longitude: -122.2140121},
                {latitude: 47.5524695, longitude: -122.0425407}]
      }
    }

    displayMarkers = () => {
      return this.state.stores.map((store, index) => {
        return <Marker key={index} id={index} position={{
         lat: store.latitude,
         lng: store.longitude
       }}
       onClick={() => console.log("You clicked me!")} />
      })
    }
  
    render() {
      return (
          <Map
            google={this.props.google}
            zoom={8}
            style={{ width: '10%', height: '10%'}}
            initialCenter={{ lat: 47.444, lng: -122.176}}
          >
            {this.displayMarkers()}
          </Map>
      );
    }
  }

export default GoogleApiWrapper({
    apiKey: config.apiKey,
    signature: config.signature
})(GoogleMap2)

截屏：

如您所见，即使我使用style属性减小了Map的大小，该组件仍然具有height: 100%和width: 100% 。 请帮助我实际减小它的大小。

Answer 1

Map组件有一个名为containerStyle的属性，通常当您想要更改默认位置“绝对”时。 这将负责Map容器。 相应地更改样式。

这是新的Map组件：

<Map
            google={this.props.google}
            zoom={8}
            style={{ width: '10%', height: '10%'}}
            containerStyle={{width: "40%", height: "29%", position: "fixed"}}
            initialCenter={{ lat: 47.444, lng: -122.176}}
          >
            {this.displayMarkers()}
</Map>