Question

我正在尝试使此Google Maps HOC动态化。我将纬度和经度传递给Component来替换默认位置。这似乎不起作用。我认为我需要以其他方式传递道具。有什么建议吗？

// Google地图组件

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;

//使用Google Maps组件的组件

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

Answer 1

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

Google Maps HOC未收到道具

1 个答案: