Question

在尝试从freegoip.com API成功检索纬度和经度之前，我试图从Darksky.com的API中检索JSON数据，这是一个天气数据。但是，在响应所需的天气数据之前，Darksky API需要经度和纬度。这里的问题是我无法在提供所需数据后从Darksky检索JSON数据（温度，当前天气状态），即使我按照相同的说明检索第一个。任何想法都会引起我的代码片段：

＆＃13;

$( document ).ready(function() {
   
    var darkSkyKey = "c565381ee9bf05151d254ffa7ca96313"; 
    var regionLink = "http://freegeoip.net/json/";
    
$.getJSON(regionLink, function(data) {
    var country_code = data.country_code;
    var country = data.country_name;
    var ip = data.ip;
    var time_zone = data.time_zone;
    var latitude = data.latitude;
    var longitude = data.longitude;
    });

$.get(regionLink, function (response) {
    $("#location").html("Location: " + response.city + ", " + response.region_name+". Latitude: "+response.latitude+", Longtitude: "+response.longitude);
    }, "jsonp");
  
    var weatherLink = "https://api.darksky.net/forecast/c565381ee9bf05151d254ffa7ca96313/"+latitude+","+longitude+".json";
    
$.getJSON(weatherLink, function(data2) {
    var timezone = data2.timezone;
    var temperature = currently.temperature;
    var status = data2.summary;
    });
    
$.get(weatherLink, function (response2) {
    $("#temp").html("Temprature now is: "+ response2.temperature);
    $("#weather").html("Weather Status: "+ response2.status);
}, "jsonp");
    
     
});

＆＃13;

body{
    background-color: black;
    
}

.motto{
    margin-top: -21px;
    font-family: 'Kaushan Script', cursive;
    color:orange;
    text-align: center;
    font-size: 53px;
}

.topline{
    display: block;
    margin: auto;
}

.middleline{
    margin-top: -29px;
    height: 260px;
    align-items: center;
}

.weatherimage{
    background-color:currentColor;
    border-radius: 113px;
    border: 2px solid orange;
    position: relative;
    height: 262px;
    display: block;
    margin: auto;
    width: 40%;
    animation-name: pulse;
    animation-iteration-count: infinite;

}

.imgPartlycloudy{
    height: 250px;
    margin-left: 35%;
    position: absolute;
}

.imgRain{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}

.imgCloudy{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}
.imgSunny{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}

.lastline{
    height: 222px;
}

.city{
    color:orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}
.temprature{
    color: orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}
.status{
    color: orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}

.elements{
    text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="weatherTodayStyle.css">
    <script type="text/javascript" src="weatherTodayFunctions.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
<body>
    
    <div class="topline">
    <h2 class="motto"> Welcome to the Weather App</h2>
    <h3> </h3>
    </div>    
    
    <div class="middleline">
    <div class="weatherimage animated">
        <img alt="weather image" class="imgPartlycloudy" src="https://icons.wxug.com/i/c/v4/partlycloudy.svg">
        <img alt="weather image" class="imgRain" src="https://icons.wxug.com/i/c/v4/rain.svg">
        <img alt="weather image" class="imgCloudy" src="https://icons.wxug.com/i/c/v4/cloudy.svg">
        <img alt="weather image" class="imgSunny" src="https://icons.wxug.com/i/c/v4/sunny.svg">
        </div>
    
    </div>
        
    <div class="lastline">
    <div class="elements">
        <h5 class="status" id="weather"> Weather Status</h5>
        <h5 class="city" id="location">City </h5>
        <h5 class="temprature" id="temp">Temprature</h5>
        </div>
    
    </div>
    
    <a href="https://darksky.net/poweredby/">Powered by Dark Sky</a>

    </body>

</html>

＆＃13;

javascript检索json Darksky.com API数据天气

0 个答案: