React-Google-Maps：標記在縮放后調整大小

Question

我在我的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>
    )

Answer 1

我有完全相同的問題，我發現解決這個問題的最簡單方法是在svg標簽上定義文件本身svg的寬度和高度： <svg width="00" height="00"> 。