JavaScript调用浏览器Geolocation API获取地图坐标返回undefined问题

• 你调用的navigator.geolocation.getCurrentPosition是回调风格的异步API，本身不返回Promise，直接用await无法获取回调的返回值，且回调函数的return只会返回到回调本身，不会传递到外层的foo函数。
• foo函数定义在未执行的匿名async函数作用域内，外层代码无法访问到foo，同时你定义options的顺序在调用getCurrentPosition之后，调用时options实际为undefined。
• 整个异步逻辑没有正确包装Promise，导致foo函数执行完直接返回undefined，不会等待定位结果返回。

// 先把回调式的定位API包装成Promise
function getCurrentPosition(options) {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      pos => resolve([pos.coords.latitude, pos.coords.longitude]),
      err => reject(err),
      options
    )
  })
}

async function foo() {
  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };
  try {
    const [lat, long] = await getCurrentPosition(options);
    console.log('Your current position is:');
    console.log(`Latitude : ${lat}`);
    console.log(`Longitude: ${long}`);
    return [lat, long];
  } catch (err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
    throw err;
  }
}

// 注意await只能在async函数内使用，这里用立即执行async函数包裹顶层逻辑
(async () => {
  let result = await foo();
  console.log(result);
  let x = result[1];
  console.log(x);
})()

• 把原生回调式的定位API封装为返回Promise的函数，才能正常使用async/await语法等待异步结果
• 调整了变量定义顺序，确保调用API时options已经完成赋值
• 移除了冗余的作用域嵌套，把foo函数暴露在顶层逻辑可访问的作用域内
• 顶层的await逻辑用async立即执行函数包裹，符合浏览器JS的语法要求（非模块环境下顶层await默认不被支持）
• 补充了错误捕获逻辑，定位失败时也能正常抛出错误不会静默失败
• 去掉了result[1]前不必要的await，同步取值不需要异步等待

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