从Open Weather API中提取信息

Question

我在Code Pen上编写了一个Web应用程序，它可以获取用户位置并显示当前的本地天气。我成功地拉取了经度和纬度，但我似乎无法从API调用中获取所需的JSON信息。

我用AJAX解析它，我相信我已经完成了Official API Documentation的要求，但它不起作用，数据甚至不会显示在控制台上。我已经看过很多答案，但我无法得到它的工作。

我想补充的信息里面BLOCKQUOTE

if (navigator.geolocation) { 
 
    //Return the user's longitude and latitude on page load using HTML5 geolocation API 
 
    window.onload = function() { 
 
    function getCurrentLocation (position) { 
 
     
 
     latitude = position.coords.latitude; 
 
     longitude = position.coords.longitude; 
 
     
 
     console.log(latitude); 
 
     console.log(longitude); 
 

 
     $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) { 
 
     console.log(data); 
 
     console.log(weather.main.temp); 
 
     $(".city").append(name + " "); 
 
     $(".temperature").append(temp + " "); 
 
     $(".weatherdescription").append(field + " "); 
 
      }) 
 
      
 
     }; 
 
    } 
 
    
 
     navigator.geolocation.getCurrentPosition(getCurrentLocation); 
 
    }; 
 

<h1 class="jumbotron" style="color:white"><em>The Weather Today</em></h1> 
 

 
<div class="container-fluid"> 
 
    <div class = "row text-center"> 
 
    </div> 
 
    <div id="weather" class = "row text-center"> 
 
    <div class = "col-xs-12 well message"> 
 
     <blockquote id = "raw_json"> 
 
     <div class="weatherbox"> 
 

 
     <strong class="city">{CITY NAME HERE}</strong> 
 
    <br/> 
 
     <span class="temperature">{X} °C</span> 
 
    <br/> 
 
     <span class="weatherdescription">{WEATHER DESCRIPTION HERE}</span> 
 
     <br/> 
 

 
    </div> 
 
    </blockquote> 
 
    </div> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 1

与以下替换您的JavaScript代码，它应该工作。

if (navigator.geolocation) { 
    //Return the user's longitude and latitude on page load using HTML5 geolocation API 
    window.onload = function() { 
     navigator.geolocation.getCurrentPosition(getCurrentLocation); 

    } 

} 


function getCurrentLocation(position) { 

    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 

    console.log(latitude); 
    console.log(longitude); 

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) { 
     console.log(data); 
     console.log(weather.main.temp); 
     $(".city").append(name + " "); 
     $(".temperature").append(temp + " "); 
     $(".weatherdescription").append(field + " "); 
    }) 

}; 

CODEPEN：https://codepen.io/azimjs/pen/KXybpa?editors=0011