javascript - 脚本不响应开放天气 API

Question

我正在尝试使用地理位置来获取当前坐标，然后将其输入到开放天气 API 中以获取数据并通过 html 显示它。

这是我的脚本:

var lat =0;
var long =0;
function getLocation(){
  var x = document.getElementByID('demo');
  if (navigator.gelocation){
    navigator.gelocation.getCurrentPosition(function(position){
      lat = position.coords.latitude;
      long = position.coord.longitude;
        $('#coord').html('Here:'+lat+ 'here'+long);
    });
  } else {
    x.innerHTML= 'Geolocation not supported';
  }
};

function getWeather(callback){
  $.ajax({
    dataType:"jsonp",
    url:'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&APPID=f2d2480cdd1ef46b9f10dd6860cb1a3e',
    succes: callback
  });
}
getWeather(function(data){
  var temp = data.main.temp;
  var description = data.weather[0].description;
  $("#temp").html(data.main.temp);
  $('#desc').html(data.weather[0].description);
});

$('document').ready(function(){
  getLocation();
  getWeather();
});

这是 html:

<div id = "city">
  <h4>city</h4>
</div>
<div id="temp">
  <h4>temp</h4>
</div>
<div id= "desc">
  <h4>description</h4>
</div>
<div id= "coord">
  <h4>coord</h4>
</div>

我目前正在 codepen.io 上做这个项目，这里是 link我真的不确定我做错了什么。我也查看了其他示例代码，但我无法发现我所犯的错误。我能否获得一些关于为什么代码似乎没有响应的帮助。

Answer 1

代码存在几个小问题。如果你仔细观察的话，你自己就能弄清楚的事情。

1. 我发现您在 getWeather 函数返回回调时遇到了拼写错误:

   function getWeather(callback){
     $.ajax({
       dataType:"jsonp",
       url:'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&APPID=f2d2480cdd1ef46b9f10dd6860cb1a3e',
       succes: callback
     });
   }
   

你的错误在这里:succes:callback，应该是success。

1. 是不是在$('document').ready(function()上加上单引号。删除document两边的单引号。

2. 这里还有另一个拼写错误:var x = document.getElementByID('demo');，它应该是var x = document.getElementById('demo');

3.您遇到的另一个问题是您再次放错了一个 ID。您尝试调用 demo 但未指定:

 var x = document.getElementById('demo');

相反，您应该记下用于地理定位的 coord ID，如下所示:var x = document.getElementById('coord');