脚本没有响应打开天气api

Question

我试图使用geolocations获取当前坐标，然后将输入到打开天气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

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

1. 的GetWeather（）函数被调用，二审
2. 的GetWeather（无参数的getLocation（）更新坐标后应该执行，这是异步的。您可以使用Promises来组织代码，或者等待ES7
3. 在某些浏览器（Chrome）中，您应该通过HTTPS获取地理位置，但openweathermap公共API仅可通过HTTP获得，因此此代码本在Chrome中不起作用
4. 分离担忧：每个职能都应该完成一项工作，例如无论是获取数据或使其

最终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)) 
}); 

Answer 2

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

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.Another的问题是，您的ID的错位一个试。你在哪里试图调用demo但没有一个规定：

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

相反，你应该放下coord ID，你正在使用的地理定位是这样的：var x = document.getElementById('coord');

Answer 3

这是应该工作，至少它适用于我： 1-更改“长”变量名称为“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(); 
});