google-maps - React-google-maps +redux - 获取新位置时如何将 map 居中？

Question

我正在使用react-google-maps，并且我遵循了该示例:LINK 。我正在获取来自 GPS 设备的数据，我想在获取新数据时居中。

这是整个 map 组件的代码:

const GettingStartedGoogleMap = withGoogleMap(props => (

  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={18}
    defaultCenter={props.defCenter}
    onClick={props.onMapClick}
  >
    {props.markers.map((marker,i) => (
      <Marker
        key={i}
        position={marker.location}
        time={marker.time}
        onClick={() => props.onMarkerClick(marker)}
      >
        { marker.isShown &&
          <InfoWindow onCloseClick={() => props.onMarkerClick(marker)}>
             <div className="marker-text">{marker.time} </div>
          </InfoWindow>
        }
      </Marker>

    ))}
  </GoogleMap>
));

class GettingStartedExample extends Component {

  componentDidMount(){
    this.props.fetchMarkers();
    console.log("MONT");
    console.log(this.props.markers.length);

  }
  componentWillReceiveProps(){
    console.log(this.props.markers);
    console.log(this.props.markers.length);
  }

  state = {
     markers: this.props.markers,
     center: {lat: 50.07074, lng: 19.915718},
   };

  handleMapLoad = this.handleMapLoad.bind(this);
  handleMarkerClick = this.handleMarkerClick.bind(this);

  handleMapLoad(map) {
    this._mapComponent = map;
    if (map) {
      console.log(map.getZoom());
    }
  }

  handleMarkerClick(targetMarker) {
    /*
     * All you modify is data, and the view is driven by data.
     * This is so called data-driven-development. (And yes, it's now in
     * web front end and even with google maps API.)
     */
    const nextMarkers = this.state.markers.filter(marker => marker !== targetMarker);
    if(targetMarker.isShown==true)
    {
        targetMarker.isShown=false;
    }
    else
    {
        targetMarker.isShown=true;
    }
    this.setState({
      markers: nextMarkers,
      center: {lat: 5.07074, lng: 19.915718}
    });
  }

  render() {
    const markers = this.props.markers.map((marker,i) => {
      return (
          <Marker key={i} position={marker.location} time={marker.time} onClick={this.handleMarkerClick} />
        )});
    var centerPos;
    var lastMark;
    if(markers[markers.length-1]!== undefined)
        {
          centerPos=markers[markers.length-1].props.position;
          lastMark=markers[markers.length-1].props;
          console.log(centerPos);
        }
    else {
          centerPos={lat: 5.07074, lng: 19.915718};
        }
    return (
      <div className='container map-container'>
        <GettingStartedGoogleMap
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div style={{ height: `100%` }} />
          }
          onMapLoad={this.handleMapLoad}
          markers={this.props.markers}
          onMarkerClick={this.handleMarkerClick}
          defCenter={this.state.center}
          lastMarker={lastMark}
        />
      </div>
    );
  }
}

GettingStartedExample.propTypes={
  markers: React.PropTypes.array.isRequired,
  fetchMarkers: React.PropTypes.func.isRequired
}

function mapStateToProps(state){
  return{
    markers:state.markers
  }
}

export default connect(mapStateToProps,{fetchMarkers})(GettingStartedExample);

可能我必须将中心状态设置为 this.props.markers 中的最后一个对象，我尝试在 componentWillReceiveProps() 上执行此操作，但我不知道如何操作。我也在 render() 中尝试过:

if(markers[markers.length-1]!== undefined)
        {
          centerPos=markers[markers.length-1].props.position;
          lastMark=markers[markers.length-1].props;
          console.log(centerPos);
        }
    else {
          centerPos={lat: 5.07074, lng: 19.915718};
        }

并试图将其传递给国家，但没有成功。我确信解决方案很简单，但我没有 React 经验。如果有帮助，我将添加 actions.js 代码，其中定义了用于获取标记的 redux 操作:

export const SET_MARKERS='SET_MARKERS';

/*markers*/
export function setMarkers(markers){
  return{
    type:SET_MARKERS,
    markers
  }
}

export function fetchMarkers(){
  return dispatch => {
    fetch('/api/markers')
      .then(res=>res.json())
      .then(data=>dispatch(setMarkers(data.markers)));
    ;
  }
}

Answer 1

只需将 center 属性添加到 GoogleMap 组件即可。

<GoogleMap 
    center={props.center}
/>