Question

我正在尝试从FreeCodeCamp进行“显示本地天气”练习，但我在JS部分遇到了一些问题。

有时当我点击按钮时，它会显示名称和温度，从lat = 35和lon = 139。有时它会显示我的城市名称和温度。

为什么它不总是显示我的城市名称和临时？

https://codepen.io/rvprado/pen/QrxjWK JS CODE：

var api = "https://fcc-weather-api.glitch.me/";
var lat = 35;
var lon = 139;

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;
  lat = crd.latitude;
  lon = crd.longitude;
};

function error(err) {
  $("#error").html('ERROR(' + err.code + '): ' + err.message);
};

$(document).ready(function() {
  $("#getMessage").on("click", function(){
    navigator.geolocation.getCurrentPosition(success,     error, options);

  //Print the lat + lon to check
  $(".message").html(lat+ " " + lon);

  //Forming the API link
  api = "https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon="+lon;   

  // Printing API to check  
  $(".message").html(api);
  $.getJSON(api, function(json){
        $(".message").html(json.name + " " +json.main.temp + "ºC");
        });
    });
});

Answer 1

由于getCurrentPosition()是异步的，因此很有可能不会立即发生，因此我们需要等待它，因为我们依赖于纬度，经度属性。

解决此问题的方法之一是将API调用移至成功回调。

function success(pos) {
    var crd = pos.coords;
    lat = crd.latitude;
    lon = crd.longitude;
    api = "https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon="+lon;  
    $.getJSON(api, function(json) {
      $(".message").html(json.name + " " + json.main.temp + "ºC");
    });
}

现在我们保证在获得纬度和经度之后会发生api调用。

navigator.geolocation问题（显示当地天气FCC）

1 个答案: