React中如何将Geolocation获取的坐标设为Google Map默认中心？

嘿，你已经搞定了最关键的位置获取部分，现在只需要把动态坐标和地图中心绑定起来就行啦！这里是调整后的代码，我会标注出核心改动：

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import Geolocation from 'react-geolocation';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default class Map extends Component {
  static defaultProps = {
    center: { lat: 40.7446790, lng: -73.9485420 },
    zoom: 11
  };

  // 1. 添加组件状态，存储动态更新的地图中心
  state = {
    mapCenter: this.props.center
  };

  render() {
    return (
      <Geolocation
        render={({ fetchingPosition, position: { coords: { latitude, longitude } = {} } = {}, error, getCurrentPosition }) => {
          // 2. 成功获取坐标时，更新地图中心状态
          if (latitude && longitude) {
            this.setState({
              mapCenter: { lat: latitude, lng: longitude }
            });
          }

          return (
            <div>
              <button onClick={getCurrentPosition}>Get Position</button>
              {error && <div>{error.message}</div>}
              <pre>
                latitude: {latitude}
                longitude: {longitude}
              </pre>
              <div className='google-map' style={{ height: '80vh', width: '100%' }}>
                {/* 3. 用响应式的center替代静态的defaultCenter */}
                <GoogleMapReact
                  center={this.state.mapCenter}
                  defaultZoom={this.props.zoom}
                >
                  {/* 给Marker坐标加容错，避免初始加载时出现undefined */}
                  <AnyReactComponent
                    lat={latitude || this.props.center.lat}
                    lng={longitude || this.props.center.lng}
                    text={'Wheres Waldo?'}
                  />
                </GoogleMapReact>
              </div>
            </div>
          );
        }}
      />
    );
  }
}

关键改动说明： #

• 新增状态mapCenter：用来保存动态变化的地图中心，初始值沿用默认props的静态坐标，保证页面加载时地图有默认显示位置。
• 动态更新状态：在Geolocation的回调里，检测到有效坐标时立刻更新状态，触发组件重新渲染。
• 替换defaultCenter为center：defaultCenter仅在组件首次渲染生效，而center是响应式属性——状态变化时，地图会自动切换到新的中心坐标。
• Marker坐标容错处理：给Marker的坐标设置默认值，避免获取位置前出现undefined导致的渲染问题。

这样点击"Get Position"按钮获取到你的位置后，地图就会自动跳到你的当前坐标啦！

内容的提问来源于stack exchange，提问作者alar