Google 地图 HOC 未收到道具

Question

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

// 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 地图组件的组件

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

Answer 1

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

Google 地图 HOC 未收到道具

Google Maps HOC not receiving props

reactjs

google-maps

higher-order-components