Question

我正在尝试使用forecast.io的API来处理我为Free Code Camp制作的简单网络应用。

我在使用此功能时遇到了一些问题：

var btn = document.getElementById("addLoader");

if (btn) {
  btn.addEventListener('click', addLoader, false);
}

function addLoader() {
  var div = document.createElement('div');
  div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
  this.appendChild(div);
}

}

您可以在此处查看完整代码：http://codepen.io/Mortiferr/pen/mPXKzZ

我已经设置了两个检查，一个console.log在某个时刻工作，然后随机停止工作，但jQuery <button id="addLoader">Test</button>从未起作用。

为什么这不起作用？

Answer 1

仔细查看您的代码，似乎是一个范围问题，在开始时全局声明变量lat和lon。我建议您首先获取用户的当前位置，然后在<{em>} navigator函数中进行API请求;像这样的东西：

navigator.geolocation.getCurrentPosition(function(pos){
    var lat = pos.coords.latitude;
    var lon = pos.coords.longitude;
    $.ajax({
        url: baseURL + baseURL + key + lat + "," + lon,
        method: "GET",
        dataType: "jsonp",
        success: function(x){
            console.log("the api responded with the weather :)");
            $(".desc").text("If it worked this will appear");
        }
    });
});

希望它有所帮助!!

Answer 2

我修改了您的示例并尝试使用其终结点。它们似乎返回包含乱码数据的JSON，因为存在“ Unexpected end of data at line 1" 错误。

以下是修改后的示例：http://codepen.io/anon/pen/KzxOGq，概述如下：

function fahrenheitToCelsius() {
   var celsiusTemp = Math.round((temperature - 32) / 1.8);
}

function init() {
   var key = "d7294f4361b9b4f604fc3bb61e7ae763"; // please no looky
   var baseURL = "https://api.forecast.io/forecast/" // bass drop
   var lat;
   var lon;
   var url;
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(location) {
         lat = location.coords.latitude;
         lon = location.coords.longitude;

         url = baseURL + key + '/' + lat + "," + lon;

         $.ajax({
            url: url,
            cors: true,
            success: function(d) {
               console.log("the api responded with the weather :)");
               $(".desc").text("Here is the weather");
            }
         })
      });
   } else {
      alert("Sorry, geolocation is not supported by this browser.")
   }
}

init(); // batter up

如果您尝试使用完全不同的端点，例如 http://date.jsontest.com/ ，则可行。

还有一个说明，他们的API已经改变。如果您查看他们的DOCS，您会发现您需要这个网址方案才能发挥作用：

https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE

因此，例如，如果您在浏览器中打开它，则可以使用此功能：

https://api.forecast.io/forecast/d7294f4361b9b4f604fc3bb61e7ae763/63.559508,10.209261

然而，正如我最初所说，由于xhr-requests最终会终止数据，因此forecast.io似乎发送了一些问题。

另外：在原始代码示例中，GEO从未实例化，因此控制台会抛出错误。我建议looking at the modified one我做了。

Weather app API不再有效

2 个答案: