我在我的React项目中使用“react-google-maps”https://github.com/tomchentw/react-google-maps。
为了说明我的问题,请在下面找到两张图片。第一个显示加载后地图的外观,第二个显示缩放后的外观。
显然这不是我想要的。
但是,我不知道造成这种情况的原因。当使用size而不是scaledSize时,可以观察到相同的效果(即截止图标)。这是我实例化我的地图和标记的方式:
const MapInit = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={13}
defaultCenter={{ lat: 48.150884140293215, lng: 11.593923568725586 }}
>
<Marker
{...props.marker}
/>
</GoogleMap>
));
这是我的渲染方法。
render () {
const loc = this.props.eventLocation
const marker = {
// position: new google.maps.LatLng(loc.latitude,loc.longitude),
position: new google.maps.LatLng(loc.latitude,loc.longitude),
icon: {
url: icon_url(this.props.markerIcon,'purple'),
scaledSize: new google.maps.Size(40, 64),
origin: new google.maps.Point(0,0)
}
}
return (
<Row>
<Col xs={12}>
<div className='map__aspect-ratio'>
<div className='map__content'>
<MapInit
containerElement={
<div style={{ 'height': `100%` }} />
}
mapElement={
<div style={{ 'height': `100%` }} />
}
onMapLoad={this.handleMapLoad}
marker={marker}
/>
</div>
</div>
</Col>
</Row>
)
答案 0 :(得分:0)
我遇到了完全相同的问题,找到解决该问题的最简单方法是在文件本身上的svg标签:<svg width="00" height="00">
上定义svg的宽度和高度。