使用openweathermap api显示当地天气 [英] show local weather using openweathermap api

问题描述

我要制作一个使用openweathermap API显示本地天气的网络应用程序.当我单击按钮时，将调用IP API以获取我的位置(经度和纬度)的坐标.这些信息然后与API密钥(我在openweathermap.org网站上注册)一起使用，以创建URL以根据APIdocs调用天气信息，然后使用从服务器获取的数据来更改HTML元素.我在代码笔上完成此操作.我试图做最简单的一个，但是没用.

I am going to make a web app that show local weather using openweathermap api. When I click the button, an IP API was called to get the co-ordinate of my location(longitude and latitude). These information then was used with API key (I registered in the website openweathermap.org) to create URL to call weather info according to the APIdocs, then change the HTML element with the data got from the server. I doing this on codepen. I tried to do the simplest one but it doesn't work.

<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)
    })
})

推荐答案

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

You have several issues. The first is that the $.getJSON calls are asynchronous, so the text() of the elements will be changed before any request completes. You need to place all code dependant on the values returned from the request in the callback functions.

第二，您遇到了变量范围问题，即您要在函数内部定义变量，然后尝试在未定义之外使用它们.

Secondly you have issues with variable scope where you're defining your variables inside the function and then attempting to use them outside where they will be undefined.

话虽如此，您需要将您的逻辑重新安排为类似这样的内容:

With that said, you need to re-arrange your logic to something like this:

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 .还请注意，变量现在是本地变量，如何在其自身的函数范围内使用.

Note that the function calls are chained from the event (ie the click makes the location AJAX request, which calls getWeather which then calls showWeather. Also note how the variables are now local and used within their own function scope.

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

Finally, check that you're using the correct data formats for the AJAX requests. ip-api.com/json is returning JSON, not JSONP.

这篇关于使用openweathermap api显示当地天气的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！