Question

我将使用openweathermap api创建一个显示当地天气的网络应用程序。当我单击按钮时，会调用IP API来获取我的位置（经度和纬度）的坐标。这些信息随后与API密钥（我在网站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()将被更改。您需要将所有代码放在回调函数中依赖于请求返回的值。

其次，你有变量范围的问题，你在函数中定义你的变量，然后尝试在它们undefined之外的地方使用它们。

话虽如此，你需要重新安排你的逻辑：

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。

Answer 2

您可以使用第三方API获取有关位置的数据。例如：http://ip-api.com/. 您可以使用ip-api从OpenWeatherMap服务获取位置天气数据。它可以帮助您获取访问者所在位置的天气。

 var getIP = 'http://ip-api.com/json/';
    var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
    $.getJSON(getIP).done(function(location) {
        $.getJSON(openWeatherMap, {
            lat: location.lat,
            lon: location.lon,
            units: 'metric',
            APPID: 'Your-Openweather-Apikey'
        }).done(function(weather) {
          $('#weather').append(weather.main.temp);
            console.log(weather);
        })
    })

使用openweathermap api显示当地天气

2 个答案: