Question

我正在制作一个基于网络的基本天气应用，可以检测用户所在位置的当前天气情况。到目前为止，我目前的代码确实有效，但缺少一个重要的功能 - 我希望网页的背景根据用户的位置和天气状况而改变。例如 - 如果用户在纽约并且天气晴朗，我想将任何基于纽约的流行图像（例如：时代广场）与晴朗的天空一起显示为body背景。我搜索了几个API，但没有找到符合我需求的API。

在我目前的代码中，我使用IPInfo.io获取用户的位置，OpenWeatherMap获取天气状况。

这个pen有我的代码（注意 - 单位的代码还没有被添加），这里是JS位 -

var lat = 0.0,
    lon = 0.0;

var testURL = 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=2de143494c0b295cca9337e1e96b00e0';
var myURL = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&appid="ae0acb60e8db4952e081c2fb470a1b23"';

var city = '',
    state = '',
    country = '',
    postal = 0;


//if (navigator.geolocation) {
//    /* geolocation is available */
//    navigator.geolocation.getCurrentPosition(function (position) {
//        lat = position.coords.latitude;
//        lon = position.coords.longitude;
//        console.log("Latitude = " + lat);
//        console.log("Longitude = " + lon);
//
//        display(position.coords.latitude, position.coords.longitude);
//    });
//
//} else {
//    /* geolocation IS NOT available */
//    $("#jumbotron").html("geolocation not available");
//
//}

//get co-ordinates using ipinfo.io
$.getJSON('http://ipinfo.io', function (data) {
    console.log(data);
    var loc = data.loc;
    lat = loc.split(",")[0];
    lon = loc.split(",")[1];
    display(lat, lon);
    city = data.city;
    state = data.region;
    country = data.country;
    postal = parseInt(data.postal, 10);

})


function display(x, y) {
    $("#pos1").html("<b>" + x + "</b>");
    $("#pos2").html("<b>" + y + "</b>");
}

//function to calculate wind direction from degrees
function degToCompass(num) {
    //num = parseInt(num, 10);
    console.log("Inside degtocompass = " + num);

    var val = Math.floor((num / 22.5) + 0.5);
    var arr = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];
    return arr[(val % 16)];
}

//function to return current temperature
function convertTemp(currTemp) {

    //get celsius from kelvin
    return Math.round(currTemp - 273.15);
}

$("button").click(function () {
    console.log("In Latitude = " + lat);
    console.log("In Longitude = " + lon);

    //prepare api call
    $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&appid=ae0acb60e8db4952e081c2fb470a1b23',
        //url: testURL,
        type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
        data: {}, // Additional parameters here
        dataType: 'json',
        success: function (data) {

            console.log(data);

            //---------get the clipart---------------
            var picLink = 'http://openweathermap.org/img/w/';
            var picName = data.weather[0].icon;
            picLink += picName + ".png";

            $("#picture").empty().append('<img src="' + picLink + '">');


            //----------get the temperature-----------
            var curTemp = convertTemp(data.main.temp);
            console.log("Current temp = " + curTemp);
            //$("#temp").empty().append("<b>" + curTemp + "</b>");
            $("#picture").append("<b>" + curTemp + "</b>");



            //----------get the place----------------------
            var area = city + ", " + state + ", " + country;
            $("#area").empty().append("<b>" + area + "</b>");


            //----------get weather conditions------------
            $("#conditions").empty().append("<b>" + data.weather[0].description + "</b>");

            //----------get wind speed------------
            //get wind direction
            var windSpeed = degToCompass(data.wind.deg);
            //add wind speed
            windSpeed += ' ' + data.wind.speed;
            //display wind speed
            $("#wind-speed").empty().append("<b>" + windSpeed + "</b>");





        },
        error: function (err) {
            alert(err);
        },
        beforeSend: function (xhr) {
            //xhr.setRequestHeader("X-Mashape-Authorization", "32ROUuaq9wmshfk8uIxfd5dMc6H7p1lqdZSjsnXkB5bQtBteLK"); // Enter here your Mashape key
        }
    });

});

Answer 1

嗯......首先，没有必要使用WebServices，但如果没有任何API，你就无法做到。我可以看到你使用openweathermap API。据我所知，此API返回经度和纬度，因此您可以将这些值用作对照片API（如flickr）的另一个请求的输入，以获取所需的图像。此外，openweathermap API返回城市名称，可以使您的照片请求更加准确。

天气应用的基于位置和天气的图像搜索API

1 个答案: