反应 google 地图

Question

有人可以告诉我如何更改来自默认属性的 defaultCenter 吗？如何更改默认值属性并从服务器动态提供值。

class SimpleMap extends React.Component {
    static defaultProps = {
        center: {lat: 59.95, lng: 30.33},
        zoom: 11
    };

    render() {
        return (
            <GoogleMapReact
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
            >
        )
    }
}

Answer 1

请将 defaultCenter 从默认道具移动到组件状态。

constructor(props) {

    super(props)
    this.state = {
      center: {
        lat: 59.95,
        lng: 30.33
      },
      zoom: 11
    }
  }

渲染

render() {
    return (
      <GoogleMapReact
       defaultCenter={this.state.center} //access here using state
       defaultZoom={this.state.zoom}
     />);
  }

每当您想更新 center 和 zoom 值时，只需使用 setState 进行状态更新，组件将使用新的更新值重新呈现。

使用 Redux:

使用 redux，这个值将来自你的组件容器映射，通过 reducer 来存储。

反应 google 地图

React google maps

reactjs

google-maps

react-redux

react-map-gl