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

Geolocation always shows Moscow Javascript/JQuery/JSON (Open Weather API)

本文关键字：API JQuery 显示 莫斯科 地理位置 Javascript JSON      更新时间：2023-09-26

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

我正在为我的免费代码营制作一个天气小部件应用程序。除"城市"之外的所有内容都是静态占位符。我正在使用开放天气API，它使我们到达纬度和经度。出于调试目的，我将区域的经度和纬度放在时间占位符下方。

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

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

谢谢！非常感谢！

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

将$.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.")
  }
});

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

已添加

  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

您可以使用提供城市名称的第三方 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这样做是为了得到摄氏度

相关文章：