使用 openweathermap api 显示当地天气答案

【问题标题】：show local weather using openweathermap api使用 openweathermap api 显示当地天气
【发布时间】：2016-03-23 09:24:48
【问题描述】：

我将制作一个使用 openweathermap api 显示当地天气的网络应用程序。当我单击按钮时，会调用一个 IP API 来获取我的位置坐标（经度和纬度）。然后将这些信息与 API 密钥（我在网站 openweathermap.org 中注册）一起使用，以创建 URL 以根据 APIdocs 调用天气信息，然后使用从服务器获取的数据更改 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)
    })
})

【问题讨论】：

你不能在JS中使用API KEY。这仅适用于服务器端
在 Firefox 等浏览器中，代码将无法正常工作，因为来自其他站点的 URL 被 AJAX 阻止
@devaldcool：不能在 JS 中使用 API KEY，我在这里使用它并且它工作。你到底是什么意思？
API KEY 是一个密钥。把它当作你的密码。明白了吗？

标签： javascript jquery api

【解决方案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。

【讨论】：

@VirginieLGB：谢谢，它有效，但“地点”没有显示我所在位置的正确信息。
@DalesVu 这取决于 ip-api.com 结果。通常他们能做的最好的事情就是扫描你的 IP 地址并对其进行地理定位，所以我猜它返回的位置是你最近的交换/ISP 服务器所在的位置。
@RoryMcCrossan：它返回一个完全陌生的地名，我不知道为什么，它不是我最近的交易所/ISP 所在的位置（因为我知道在哪里）。我第一次尝试时，它返回了正确的信息。

【解决方案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);
        })
    })

【讨论】：