地理位置始终显示莫斯科 Javascript/JQuery/JSON（开放天气 API）答案

【问题标题】：Geolocation always shows Moscow Javascript/JQuery/JSON (Open Weather API)地理位置始终显示莫斯科 Javascript/JQuery/JSON（开放天气 API）
【发布时间】：2016-02-28 11:20:21
【问题描述】：

编辑：刚刚完成了这个项目。新链接在这里！ http://codepen.io/myleschuahiock/full/pyoZge/

我正在为我的免费代码营制作天气小部件应用程序。除“城市”外的所有内容都是静态占位符。我正在使用 Open Weather Api，它使我们知道纬度和经度。出于调试目的，我将我所在区域的经度和纬度放在时间占位符下方。

我的问题是，当我在 API 链接上静态输入纬度和经度时，它工作得很好。它返回我居住的附近城市“曼达卢永市”：

http://api.openweathermap.org/data/2.5/weather?lat=14.603814400000001&lon=121.04907589999999&id=524901&APPID=ca8c2c7970a09dc296d9b3cfc4d06940

但是当我这样做时，我会在其中动态添加 mylatitude 和 mylongitude，以完成 API 链接：

  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + mylatitude + "&lon=" + mylongitude + "&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
$('.city').html(json.name);

我总是把“莫斯科”作为我的城市。

请在此处仔细查看我的 Javascript/JQuery 代码！ http://codepen.io/myleschuahiock/pen/zqYzWm?editors=0010

非常感谢！非常感谢！

【问题讨论】：

您的代码不起作用的原因是navigator.geolocation.getCurrentPosition 是异步的。因此，您在实际确定位置之前致电$.getJSON。最简单的解决方案是将getJSON 移动到navigator.geolocation.getCurrentPosition 回调中
@JaromandaX 或将 getJSON 移动到 if 条件中，因为您只想在客户端允许该位置时运行 API。 :P
@NewToJS - 你的建议让我感到困惑...... if 条件在我所指的回调之外 - 为什么我要在回调之前或之后放置 getJSON，会发生完全相同的问题
@JaromandaX 看看我的回答。替换 OP 的 codepen 中的 javascript 并将其替换为我发布的那个。
@NewToJS - 你的回答完全符合我的建议......将getJSON调用放在getCurrentPosition的回调中 - 你继续让我感到困惑

标签： javascript jquery json geolocation

【解决方案1】：

为您提供简单的解决方案。

将$.getJSON() 移动到您的 if 条件中，如果客户端阻止该位置，为什么还要尝试查询天气？

正如 Jaromanda X 所指出的：

navigator.geolocation.getCurrentPosition 是异步的。因此，您在实际确定位置之前调用了$.getJSON。

$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      $('.geo').html(position.coords.latitude+ " " +position.coords.longitude);
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+position.coords.latitude+"&lon="+position.coords.longitude+"&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
    $('.city').html(json.name);
  });        
  });
  }else{
    $(".geo").html("Please turn on Geolocator on Browser.")
  }
});

我希望这会有所帮助。编码愉快！

【讨论】：

why attempt to query the weather if the client blocks the location - 这不是原始代码失败的原因
我从来没有说过这是当前源代码无法正常工作的原因......这是一个问题，因此是问号？如果出现以下情况，运行 API 没有意义客户端阻止了该位置。您已经在 cmets 中解释了为什么它不起作用，除非您希望我将您的评论复制/粘贴到答案中......
我认为移动代码的原因在答案中很重要 - 随意用你自己的话解释它：p
@JaromandaX 公平竞争！：p 我已将您的评论移至答案中，但既然您确实提供了解释，我认为您用它来编辑我的答案是公平的……这样您也对解决方案有一定的贡献。

【解决方案2】：

添加

  getName(mylatitude, mylongitude);

改变了

 $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + mylatitude + "&lon=" + mylongitude + "&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
       $('.city').html(json.name);
    });

到

 function getName(mylatitude, mylongitude){
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + mylatitude + "&lon=" + mylongitude + "&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
       $('.city').html(json.name);
    });
 }

http://codepen.io/anon/pen/Yqzvbd?editors=0010

【讨论】：

您在此处的回答不完整 - 您提到了您“添加”的内容，但没有提及您添加呼叫的位置
哪个好，我猜只要codepen链接存在就行了

【解决方案3】：

您可以使用提供城市名称的第三方 IP API。使用jQuery函数$.getJSON()

var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather';
var APPID = 'APPID';
var ipAPI = 'http://ip-api.com/json/';
$.getJSON(ipAPI).done(function(location) {
    $('.geo').html(location.lat + " " + location.lon);
    $('.city').html(location.city);

    $.getJSON(openWeatherMap, {
        lat: location.lat,
        lon: location.lon,
        APPID: APPID
    }).done(function(weather) {
        $('#temperature').html(weather.main.temp - 273.15);
    })

})

OpenWeatherMap 提供了开尔文的温度，我通过weather.main.temp - 273.15 得到摄氏温度

【讨论】：