[英]I am not able to reduce the size of the Google Maps Component made by google-maps-react in my React application
Styles under the Map
component are reducing the size of the map embedded inside the component but not the actual component itself. Map
组件下的样式正在减小嵌入在组件内的地图的大小,而不是实际组件本身。 This will be more clear in the screenshot.这在屏幕截图中会更清楚。 I intentionally wrote
style={{ width: '10%', height: '10%'}}
to show that even if I reduce the size by a lot, the component still remains at the same size.我故意写了
style={{ width: '10%', height: '10%'}}
来表明即使我将尺寸缩小很多,组件仍然保持相同的尺寸。
Code:代码:
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)
As you can see that the component is still having the height: 100%
and width: 100%
even though I reduced the size of the Map
using the style
attribute.如您所见,即使我使用
style
属性减小了Map
的大小,该组件仍然具有height: 100%
和width: 100%
。 Please help me out in the actual reducing of its size.请帮助我实际减小它的大小。
There is a property of Map
component named containerStyle
, commonly when you want to change from the default of position "absolute". Map
组件有一个名为containerStyle
的属性,通常当您想要更改默认位置“绝对”时。 This will take care of the Map
container.这将负责
Map
容器。 Change the styles accordingly.相应地更改样式。
Here is the new Map
component:这是新的
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.