如何修改openweathermap JS以使用纬度经度值

Question

我最近发布了关于我正在重新设计的以下 JS openweathermap 天气应用程序的另一个问题。这是对此的后续问题。

https://codepen.io/stack-findover/pen/vYgQrPP

目前，代码使用城市搜索和地理定位作为 getWeather 函数。我想修改代码以使用一组特定的纬度/经度坐标。最好的方法是什么？

感谢您提供的任何帮助。

相关代码块如下：

var weatherData = {};
var api = "https://api.openweathermap.org/data/2.5/forecast?lat=&lon=-&units=imperial";
var id = "&APPID=acc38546e41e0baf9aa6ba45661c094b";
var cnt =  "&cnt=4"
var country="";
var ctyName = "";
var options = {
              weekday: "long", year: "numeric", month: "short",
              day: "numeric", hour: "2-digit", minute: "2-digit"
            };

var curDate = $(".cur-date");
curDate.html(new Date().toLocaleTimeString('en-US', options));

$.ajax({url: "https://ipinfo.io/json?"})
.done( function(res) {
  console.log(res);
  country = res.country;
  ctyName = "q="+res.city+","+country;

  getWeather();
});


function getWeather() {
$.ajax({url: api+ctyName+id+cnt, dataType: 'json', success: function(result) {
  $('#loader').hide();
  console.log(result);
  weatherData = result;
  var icons= [];

  $("#loc").html(result.city.name+", "+result.city.country);
  $("#cur-weath").html(result.list[0].weather[0].main);
  $("#cur-deg").html(Math.round((result.list[0].main.temp * (9/5)) - 459.67)+"°");
  $("#cur-desc").html(result.list[0].weather[0].description);
  var icon = result.list[0].weather[0].icon;
  setBackground(icon);
  //icons.push(result.list[0].weather[0].icon+".png");
  console.log(Icons[icon].icn);
  skycons.set("cur-icon",Icons[icon].icn);
 // $("#cur-icon").html("<img src='http://openweathermap.org/img/w/"+icons[0]+"'style='width:100px;height:100px;'>");
  for(var i=1;i<4;i++) {
    var $next=$(".next-weath");
    icons.push(result.list[i].weather[0].icon);
    var dt = new Date(result.list[i].dt_txt);
    if(dt == "Invalid Date") { //modify dt for internet explorer compatibility
      var ar = result.list[i].dt_txt.split(" ");
      dt = new Date(ar[0]+"T"+ar[1]);
    }
    var hour = dt.toLocaleTimeString('en-US', {hour: "2-digit", minute: "2-digit", hour12: true,  });
    $next.eq(i-1).find(".next-hour").html(hour);
    $next.eq(i-1).find(".next-desc").text(result.list[i].weather[0].description);
    $next.eq(i-1).find(".next-deg").html(Math.round((result.list[i].main.temp * (9/5)) - 459.67)+"°");
    skycons.set($next.eq(i-1).find(".next-icon")[0], Icons[icons[i-1]].icn);
  }


},

error: function(error, errorType, errorMessage) {
    $("#loc").html("Unable to Locate").next().hide();
},

beforeSend: function() {
    $("#loc").html("loading").next().show();

}});
}

$("button").on("click", getCityWeather);

$("input").keydown(function(event){
  if (event.which == 13)
    getCityWeather();
});

$(".next-deg").on("click", function() {
  if(weatherData)
    changeTempScale( $(this));
});

$("#cur-deg").on("click", function() {
  if(weatherData)
    changeTempScale( $(this));
});


function setBackground(icon) {
$(".wrap").css('background-image', 'url(' + Icons[icon].bg + ')');
}

function getCityWeather() {
$("input").val()
ctyName = "q="+$("input").val();
getWeather();
}

我尝试通过修改 openweathermap api 链接来覆盖这些函数，如下所示..但这没有给出预期的结果。

var weatherData = {};
var api = "https://api.openweathermap.org/data/2.5/forecast?lat=&lon=&units=imperial";

Answer 1

api 变量当前包含

lat=&lon=

。尝试从 api 变量中删除它。然后删除

country

和

ctyName

的变量。最后，为

lat

和

lon

创建新变量来构建请求 URL，看看这是否适合您。

生成的请求 URL 应类似于：

https://api.openweathermap.org/data/2.5/forecast?units=imperial&APPID=acc38546e41e0baf9aa6ba45661c094b&cnt=4&lat=43&lon=-70.2