Javascript 尝试从API检索数据时未定义经度

我正在尝试使用FCC项目的javascript制作一个天气预报应用程序。为了显示当前天气，我必须首先找到设备的位置。这在使用HTML地理定位时效果很好。但是当我试图在函数外部使用它时，纬度和经度给了我

未定义的

错误，尽管我试图将它分配给全局变量

$(document).ready(function(){
      var lon;
      var lat;
      function getLocation(){
        if(navigator.geolocation){
          navigator.geolocation.getCurrentPosition(showPosition);
      }
        else{
          console.log("your device is not suported!");
      }}

      function showPosition(position){
        var pos = position.coords
        lat = pos.latitude;
        lon = pos.longitude;

      }
      console.log(lat); // for debugging, here  is the undefined error
      $.ajax({
        type: 'GET',
        url: 'https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139',
        success: function(data){
          $('h1').html( "<strong>" + data.coord.lat + "</strong>" );
          console.log(latitude);
        },
        error: function(error){
          console.log(error);
        }

        });
      });

$（文档）.ready（函数（）{
瓦隆；
var lat；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}
否则{
log（“您的设备不受支持！”）；
}}
功能显示位置（位置）{
var pos=位置坐标
纬度=位置纬度；
lon=位置经度；
}
console.log（lat）；//对于调试，这里是未定义的错误
$.ajax({
键入：“GET”，
网址：'https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139',
成功：功能（数据）{
$（'h1'）.html（“”+data.coord.lat+””；
控制台日志（纬度）；
},
错误：函数（错误）{
console.log（错误）；
}
});
});

---

感谢您的帮助：）

由于浏览器需要获得用户的批准，因此获取职位是异步的。因此，发生这种情况时，需要调用web服务

$(document).ready(function(){
  var lon;
  var lat;
  function getLocation(){
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(showPosition);
  }
    else{
      console.log("your device is not suported!");
  }}

  function showPosition(position){
    var pos = position.coords
    lat = pos.latitude;
    lon = pos.longitude;


    console.log(lat); // should not be undefined anymore.
     $.ajax({
       type: 'GET',
       url: 'https://fcc-weather-api.glitch.me/api/current?lat=' + lat + '&lon=' + lon,
       success: function(data){
         $('h1').html( "<strong>" + data.coord.lat + "</strong>" );
         console.log(latitude);
       },
       error: function(error){
         console.log(error);
       }

    });
  }
});

$（文档）.ready（函数（）{
瓦隆；
var lat；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}
否则{
log（“您的设备不受支持！”）；
}}
功能显示位置（位置）{
var pos=位置坐标
纬度=位置纬度；
lon=位置经度；
console.log（lat）；//不应再未定义。
$.ajax({
键入：“GET”，
网址：'https://fcc-weather-api.glitch.me/api/current?lat=“+lat+”&lon=“+lon，
成功：功能（数据）{
$（'h1'）.html（“”+data.coord.lat+””；
控制台日志（纬度）；
},
错误：函数（错误）{
console.log（错误）；
}
});
}
});

好吧，您只需声明showPosition和getLocation。 您实际上并没有像

showPosition（）

那样调用它们，所以lat和lon保持未定义状态

您的代码中有一个未定义的“纬度”。参见

console.log（纬度）在Ajax的成功函数中。可能会将其更改为
data.coord.lat
（如上面的行）。请检查以下内容：