我無法在我的 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>