Javascript 谷歌地图：缩放后标记大小调整

我在react项目中使用“react谷歌地图”

为了说明我的问题，请看下面两张图片。第一个显示加载后地图的外观，第二个显示缩放后地图的外观

显然这不是我想要的

然而，我不知道这是什么原因造成的。使用size而不是scaledSize时，可以观察到相同的效果（即截止图标）。这是我如何实例化地图和标记的：

const MapInit = withGoogleMap(props => (
    <GoogleMap
        ref={props.onMapLoad}
        defaultZoom={13}
        defaultCenter={{ lat: 48.150884140293215, lng: 11.593923568725586 }}
    >
        <Marker
            {...props.marker}
        />
    </GoogleMap>
));

const-MapInit=withGoogleMap（props=>(
));

这是我的渲染方法

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>
    )

render（）{
const loc=this.props.eventLocation
常量标记={
//位置：新google.maps.LatLng（位置纬度，位置经度），
位置：新google.maps.LatLng（位置纬度，位置经度），
图标：{
url:icon\uURL（this.props.markerIcon，'purple'），
scaledSize：新的google.maps.Size（40,64），
来源：新google.maps.Point（0,0）
}
}
返回(
)

我遇到了完全相同的问题，我发现解决这个问题的最简单方法是在文件本身的svg标签上定义svg的宽度和高度：