Question

我正在尝试使用来自FCC项目的javascript来显示应用程序的天气。为了首先显示当前天气，我必须找到设备的位置。这可以正常使用HTML地理位置。但是当我尝试在函数event之外使用它时纬度和经度给我undefined错误尽管我试图将它分配给全局变量。

$(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);
        }

        });
      });

感谢您的帮助：）

Answer 1

由于浏览器需要获得用户的批准，因此获得该位置是异步的。因此，您需要在发生这种情况时调用您的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);
       }

    });
  }
});

Answer 2

好吧，你只需要声明showPosition和getLocation。你并不像showPosition()那样称呼它们，所以lat和lon保持未定义

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

2 个答案: