首页 > 解决方案 > 使用谷歌地图的api设置动态中心

问题描述

class SimpleMap extends Component {

    constructor(props) {
        super(props);

    }

    static defaultProps = {
        center: {lat: 40.73, lng: -73.93},
        zoom: 12
    }

    render() {

        return (
            <div style={{ height: '100vh', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: API_KEY}}
                    defaultCenter={this.props.center}
                    defaultZoom={5}
                >
                    <AnyReactComponent
                        lat={this.props.lat}
                        lng={this.props.long}
                        text=" the ISS"
                    />
                </GoogleMapReact>
            </div>
        );
    }
} 
export default SimpleMap;

我有一个由 API 提供的位置,我希望通过以我在父节点上的经纬度坐标为中心在谷歌地图上显示该位置。当我将静态 defaultProps 更改为使用道具“this.props.lat/long”时,除非我硬编码我的纬度和经度,否则它不会渲染地图。

任何意见,将不胜感激

标签: reactjs

解决方案


推荐阅读