React中如何将Geolocation获取的当前位置设置到Google Map

问题原因 #

• google-map-react 的defaultCenter、defaultZoom属于初始化属性，仅在组件首次渲染时生效，后续state更新不会触发属性重生效。你给lats、lngs设置的初始值是空字符串，首次渲染时传入了非法的坐标值，直接导致地图初始化失败，等异步拿到用户坐标时已经无法修正初始化的错误。
• 异步获取的坐标更新后，defaultCenter不会响应新的state值，地图中心也不会同步更新。

解决方案 #

你可以按照以下步骤修改代码：

1. 给坐标设置合法的初始值，或者在拿到用户坐标前不渲染地图组件
2. 将defaultCenter替换为响应式的center属性，实现坐标更新时地图中心同步变动

修正后的代码 #

const Map = () => {
    // 初始可以设置一个通用默认坐标，或者设为null后续判断渲染逻辑
    const [lats, setLats] = useState(3.66666);
    const [lngs, setLngs] = useState(8.6666);
    const [status, setStatus] = useState(null);

    const getLocation = () => {
        if (!navigator.geolocation) {
          setStatus('你的浏览器不支持地理定位');
        } else {
          setStatus('正在定位...');
          navigator.geolocation.getCurrentPosition((position) => {
            setStatus(null);
            setLats(position.coords.latitude);
            setLngs(position.coords.longitude);
          }, () => {
            setStatus('无法获取你的位置');
          });
        }
      }


    const mapProps = {
        center: {
          lat: lats,
          lng: lngs
        },
        zoom: 11
      };
    return (
        <div style={{ height: '100vh', width: '100%' }}>
             <Button onClick={getLocation} variant="primary">定位我的位置</Button>
             <p>{status}</p>
                {lats && <p>纬度: {lats}</p>}
                {lngs && <p>经度: {lngs}</p>}
            <GoogleMapReact
            bootstrapURLKeys={{ key: "替换为你的谷歌地图开发者密钥" }}
            // 用center代替defaultCenter，支持响应式更新
            center={mapProps.center}
            defaultZoom={mapProps.zoom}
            >
            <LocationMarker
                lat={59.955413}
                lng={30.337844}
                text="我的标记"
            />
            </GoogleMapReact>
      </div>
    )
}

如果你不想显示默认坐标，也可以在lats、lngs有有效值之后再渲染GoogleMapReact组件：

{lats && lngs && <GoogleMapReact
  bootstrapURLKeys={{ key: "替换为你的谷歌地图开发者密钥" }}
  center={{lat: lats, lng: lngs}}
  defaultZoom={11}
>
  {/* 自定义标记组件 */}
</GoogleMapReact>}

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