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

代码有几个小问题。如果你仔细观察的话，你可以自己弄明白的事情。

我发现你在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。

您是否在$('document').ready(function()上放了单引号。删除document附近的单引号。
您还有另一个拼写错误：var x = document.getElementByID('demo');，应为var x = document.getElementById('demo');

3.你遇到的另一个问题是你又错了一个你的身份。您在哪里尝试拨打demo，但没有指定：

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

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

Answer 2

这是应该工作的，至少它对我有用： 1-将“long”变量名称更改为“longt”（我认为你不能使用“long”，因为它是一个变量类型。 2-检查“地理位置”的拼写（你拼写错误的“gelocation”）

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

function getWeather(callback){
  $.ajax({
    dataType:"jsonp",
    url:'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+longt+'&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();
});

Answer 3

有几个拼写问题（成功而不是成功，getElementByID而不是getElementById，使用不存在的demo元素）。最重要的是代码组织存在问题：

在第二个实例中调用getWeather（）函数时没有参数
getWeather（）应该在getLocation（）更新坐标后执行，这是异步的。您可以使用Promises来组织代码，或等待来自ES7
在某些浏览器（Chrome）中，您应该通过HTTPS获取地理位置，但只能通过HTTP使用openweathermap公共API，因此此编解码器无法在Chrome中使用
关注点分离：每个功能都应该完成一项工作，例如：获取数据或渲染数据

最终codepen

function getLocation() {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation)
      navigator.geolocation.getCurrentPosition(
        position => resolve(position.coords), 
        err => reject(err.message))
    else
      reject('Geolocation not supported')
  })
}

function getWeather(coord) {
  return $.when($.ajax('http://api.openweathermap.org/data/2.5/weather?lat='+coord.latitude+'&lon='+coord.longitude+'&APPID=f2d2480cdd1ef46b9f10dd6860cb1a3e'));
}

function drawCoord(coord) {
  $("#coord").html(`Here: ${coord.latitude};${coord.longitude}`)
  return coord
}

$(document).ready(function(){
  getLocation()
    .then(drawCoord)
    .then(getWeather)
    .then(function(data){
        var temp = data.main.temp;
        var description = data.weather[0].description;
        $("#temp").html(data.main.temp);
        $('#desc').html(data.weather[0].description);
        })
    .catch(e => $(".error").html(e))
});

脚本没有响应开放天气api

3 个答案: