Question

声明：
我编辑了这篇文章，因为在我从不支持CORS的API切换到另一个API后发生了另一个错误。

我目前正在尝试构建一个app on codepen.io，根据用户地理位置的数据显示当地天气。我正在使用this API provided by OpenWeatherMap。编辑器没有显示任何语法错误，我也找不到，所以我假设我在AJAX请求中犯了一个逻辑错误。如果有人能告诉我哪里出错了，我真的很感激：

if (navigator.geolocation) {

  window.onload = function(){

    var currentPosition;
    function getCurrentLocation (position) {
      currentPosition = position;
      var lat = currentPosition.coords.latitude;
      var long = currentPosition.coords.longitude;

      $.getJSON('api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + "&appid=81621bf2bb3e08f0bfd40540baafb8ee", function(data) {
      $('#info').append('<p>' + data.weather[0].description + '</p>');          
      });      
    };     
  };

  navigator.geolocation.getCurrentPosition(getCurrentLocation);
}

<div class="main">
  <div align="center" id="info"></div>
</div>

我只提供了我认为相关的代码，但是如果你需要整个代码，你可以按照我上面的第一个链接。
感谢您的建议并提前花时间：）

Answer 1

这里有两个主要问题：

首先是这一行：

$.window.onload

这段代码没有达到您的预期（$ .window未定义），将其更改为window.onload应解决该问题。

第二个问题更严重：您收到 CORS （跨源资源共享）错误。看起来MetaWeather似乎不允许跨域请求（源自域的请求并从不同的请求数据，例如codepen.io - ＆gt; metaweather.com）。

这通常可以通过JSONP回调（MetaWeather也不支持），代理您的请求（例如Nginx）或设置您自己的后端API（例如Node.js）并通过该API进行调用来解决。

Here's a sample app tutorial使用OpenWeatherMap API处理与您尝试编码的项目非常相似的项目，该API允许您从浏览器执行API请求。

显示天气与地理位置和天气api的问题

1 个答案: