javascript - 为什么在 navigator.geolocation.getCurrentPosition() 为其赋值并返回后无法访问对象中的值？

Question

当我使用 navigator.geolocation.getCurrentPosition() 为函数 whereAmI 中的 pos 对象赋值时，我可以看到 lat 和 lng 位于对象内部，但是当我尝试使用这些属性时，它们返回未定义。非常感谢您的帮助!

import React, {useEffect, useState }  from 'react';

import { GoogleMap } from "react-google-maps"


import './Map.css';

function Map({mapsData}) {

  const myLocation = whereAmI();

  console.log(myLocation); // this returns object with values

  return (
      <GoogleMap 
      defaultZoom={12} 
      defaultCenter={{myLocation}}
      >
      { /* We will render our data here */ }
      </GoogleMap>
  )
}

export default Map;


// helper function to get my current location 
function whereAmI() {
  let pos = {};
  navigator.geolocation.getCurrentPosition((position)=> {
    pos.lat = position.coords.latitude;
    pos.lng = position.coords.longitude;
  })
  console.log(pos); // this returns an object as well with properties but pos.lat or pos.lng returns undefined
  return pos;
}

Answer 1

navigator.geolocation.getCurrentLocation() 是一个异步函数，因此您的 console.log 语句和 return 语句在 pos.lat 和 pos.lng 定义之前执行。这就是为什么 getCurrentLocation 接受在成功返回位置后执行的回调函数。