腳本沒有響應打開天氣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(); 
});