javascript - 使用 openweathermap api 显示本地天气

Question

我打算制作一个使用 openweathermap api 显示本地天气的网络应用程序。 当我单击该按钮时，会调用一个 IP API 来获取我所在位置的坐标(经度和纬度)。然后将这些信息与 API key (我在 openweathermap.org 网站上注册)一起使用，根据 APIdocs 创建 URL 来调用天气信息，然后使用从服务器获取的数据更改 HTML 元素。我这样做 on codepen .我尝试做最简单的一个，但它不起作用。

<h1>weather forcast</h1>
<button id="btn">view</button>
<p id ="test">change me</p>
<p id ="place">place</p>
<p id ="temp">temperature</p>
<p id ="description">description</p>

var getLocation = function(data) {
    var lat = data.lat;
    var lon = data.lon;
    var apiKey = "[APIKEY]";
};

var url =  'http://api.openweathermap.org/data/2.5/weather?' + 'lat=' + lat     + '&lon=' + lon + '&appid=' + apiKey;
//call back function to extract weather info.
var getWeather = function(data) {
    var temp = data.main.temp;
    var description = data.weather[0].description;
    var place = data.name;
};
$(document).ready(function() {
    $("#btn").click(function() {
        $.getJSON('http://ip-api.com/json', getLocation, 'jsonp')
        $.getJSON(url, getWeather, 'jsonp');
        $("#test").text("I AM CHANGED. THANKS!")
        $("#temp").text(temp)
        $("#description").text(description)
        $("#place").text(place)
    })
})

Answer 1

您有几个问题。首先是 $.getJSON 调用是异步的，因此元素的 text() 将在任何请求完成之前更改。您需要将所有依赖于从请求返回的值的代码放在回调函数中。

其次，您在变量范围方面遇到问题，您在函数内部定义变量，然后尝试在它们将未定义 的外部使用它们。

话虽如此，您需要重新安排您的逻辑，如下所示:

var getWeather = function(data) {
    $.getJSON('http://api.openweathermap.org/data/2.5/weather', {
        lat: data.lat,
        lon: data.lon,
        appid: "[APIKEY HERE]"
    }, showWeather, 'jsonp');
};

var showWeather = function(data) {
    $("#test").text("I AM CHANGED. THANKS!")
    $("#temp").text(data.main.temp)
    $("#description").text(data.weather[0].description)
    $("#place").text(data.name)
};

$(document).ready(function() {
    $("#btn").click(function() {
        $.getJSON('http://ip-api.com/json', getWeather)
    })
})

请注意，函数调用是从事件链接起来的(即 click 发出位置 AJAX 请求，它调用 getWeather，然后调用 showWeather. 还要注意变量现在是如何局部的并在它们自己的函数范围内使用。

最后，检查您是否为 AJAX 请求使用了正确的数据格式。 ip-api.com/json 返回 JSON，而不是 JSONP。