标记位置更改时，react-google-maps MapWithAMarker 无法重新渲染

Question

我以 react-google-maps MapWithAMarker 为例：

import React from 'react';
import { compose, withProps, lifecycle} from 'recompose';
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker,
} from 'react-google-maps';
import keys from '../../components/config/keys';

const MapWithAMarker = compose(
    withProps({
        googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${keys.google_maps_api_key}&v=3.exp&libraries=geometry,drawing,places`,
        loadingElement: <div style={{ height: '100%' }} />,
        containerElement: <div style={{ height: '400px' }} />,
        mapElement: <div style={{ height: '100%' }} />,
    }),
    withScriptjs,
    withGoogleMap
)(props =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: props.lat, lng: props.lng }}>
        <Marker position={{ lat: props.lat, lng: props.lng }}/>
    </GoogleMap>
);

export default MapWithAMarker;

我是这样使用它的：

<MapWithAMarker lat={parseFloat(excursion.lat)}
                               lng={parseFloat(excursion.lng)} />

我在我的应用程序中使用 React 路由器。

观察到的行为： 当我第一次渲染页面时，地图正确渲染。 如果我单击链接以使用不同的标记位置重新呈现页面，则地图无法加载，并且在我滚动时仅呈现一个空的灰色矩形，仅“按 ctrl 加滚动以缩放”。

Answer 1

已解决： 我需要将 defaultCenter 更改为 center 并将 defaultZoom 更改为缩放：

 <GoogleMap zoom={8}
            center={{ lat: props.lat, lng: props.lng }}>
     <Marker position={{ lat: props.lat, lng: props.lng }}/>
 </GoogleMap>