谷歌地图 HOC 没有收到道具

Question

我正在尝试使这个谷歌地图成为HOC动态的。我正在将纬度和经度传递给组件以替换默认位置。这似乎不起作用。我在想我需要以不同的方式传递道具。有什么建议吗？

谷歌地图组件

import React from "react";
const { compose, withProps } = require("recompose");
const {
withScriptjs,
withGoogleMap,
GoogleMap,
TrafficLayer
} = require("react-google-maps");
const MapWithATrafficLayer = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${
process.env.REACT_APP_GOOGLEMAPS_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={15}
defaultCenter={{ lat: props.lat, lng: props.lng }}
>
<TrafficLayer autoUpdate />
</GoogleMap>
));
export default MapWithATrafficLayer;

使用谷歌地图组件的组件

<MyMapComponent
lat={
this.state.listingInfo.address.lat
}
lng={
this.state.listingInfo.address.lng
}
/>

Answer 1

尝试将传递给GoogleMap的道具从defaultCenter更改为center。defaultCenter仅适用于初始渲染，因此，如果之后状态发生变化，则不会重新定位地图。当用户在地图上移动时，您可能需要使用该onCenterChanged来更新您的状态。