如何从 Open Weather Map 中提取温度信息 API

Question

您好，我已获得此代码，我正尝试在此基础上进行构建。

我正在使用开放天气图 API。目前我只是想知道天气如何。

但是我也想查出温度并显示出来！

function getLocation() {
    var location = document.getElementById("location").value;
    location = location.replace(" ", "%20");

    if (location == "") {
        document.getElementById("location").classList.add("error");
    } else {
        document.getElementById("location").classList.remove("error");
        getWeather(location);
    }
}

function getWeather(location) {
    var ajax = new XMLHttpRequest();
    var json;
    var apiKEY = "****dd982d18c618";
    var url = "http://api.openweathermap.org/data/2.5/weather?q=" + location + " ,uk&appid=" + apiKEY;

    ajax.open("GET", url, true);
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            json = JSON.parse(ajax.responseText);
            document.getElementById("locationForm").style.display = "none";
            document.getElementById("weather").style.display = "block";
            if (json != undefined) {
                var weather = json.weather[0].main
                setIconAndDescription(weather, location)
            } else {
                description = "Oops, I couldn't find the weather in " + location;
                document.getElementById("description").innerHTML = description;
            }
        }
    }
}

function setIconAndDescription(weather, location) {
    var icon;
    var description;
    weather = weather.toLowerCase();

    if (weather == "clear sky" || weather == "clear") {
        icon = "clear.svg";
        description = "Yay, sunshine!";
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "few clouds") {
        icon = "few-clouds.svg";
        description = "It's a little cloudy.";
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "scattered clouds" || weather == "broken clouds" || weather == "clouds") {
        icon = "clouds.svg";
        description = "Looks like scattered clouds today.";
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "rain" || weather == "light rain" || weather == "shower rain") {
        icon = "rain.svg";
        description = "Looks like rain."
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "thunderstorm") {
        icon = "thunder.svg";
        description = "Yikes, looks like a storm's brewing!"
        document.body.style.backgroundColor = ",";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "snow") {
        icon = "snow.svg";
        description = "Wrap up, it's going to snow!"
    } else if (weather == "mist") {
        icon = "mist.svg";
        description = "Looks a little misty today.";
    } else {
        icon = "default.svg";
        description = "Oops, I couldn't find the weather in " + location;
    }

    document.getElementById("weatherIcon").src = "images/" + icon;
    document.getElementById("description").innerHTML = description;
}

(function () {
    document.getElementById("btnGo").onclick = getLocation;
    document.getElementById("location").onkeypress = function (key) {
        if (key.keyCode == "13") {
            getLocation();
        }
    };
    //   //Convert temp from kelvin to celsius:
    //   var tempCelsius = Math.round(((data.main.temp) - 273.15));
    //
    //   $("#temp").html(tempCelsius + "C");
    //
    // });
})();

下面是我通过搜索并试图弄清楚其他人是如何做到的。

//Convert temp from kelvin to celsius:
            //   var tempCelsius = Math.round(((data.main.temp) - 273.15));
                //
            //   $("#temp").html(tempCelsius + "C");
                //
            // });

到目前为止，它不起作用。我已经尝试了其他版本，这些版本也允许其余日期工作。尽管这样做，数据不会显示在分配的 div.

中

最后看一眼。我觉得它可能需要在函数内部？

任何帮助都会很棒，

谢谢，

扎克

编辑

这就是我所做的，但仍然无法正常工作。是否需要有功能才能工作？

因为第一行将 "temperature" 设置为来自 json 的数据。

然后第二行做转换

然后第三个把它们放在一起。希望在div"temp"

里面

    // var temperature = json.main.temp;
        //
      //     temperature = Math.round(((data.main.temp) - 273.15));
        //
      //     $("#temp").html(temperature + "C");
        //
      //   });
})();

我应该改为在控制台记录它吗？

谢谢，

扎克

Answer 1

因为圣诞节... :)

替换函数

function setIconAndDescription(weather, location) {
    // ...
}

用这个

function showWeatherInfo(weatherInfo) {
    var weather = weatherInfo.weather[0].main.toLowerCase(),
        temperature = weatherInfo.main.temp;

    document.body.style.backgroundColor = "#FA6144";
    document.getElementById("icon").style.backgroundColor = "#7A2F21";
    document.getElementById("temp").style.backgroundColor = "#7A2F21";
    document.getElementById("description").style.backgroundColor = "#E0563D";

    if (weather == "clear sky" || weather == "clear") {
        icon = "clear.svg";
        description = "Yay, sunshine!";
    } else if (weather == "few clouds") {
        icon = "few-clouds.svg";
        description = "It's a little cloudy.";
    } else if (weather == "scattered clouds" || weather == "broken clouds" || weather == "clouds") {
        icon = "clouds.svg";
        description = "Looks like scattered clouds today.";
    } else if (weather == "rain" || weather == "light rain" || weather == "shower rain") {
        icon = "rain.svg";
        description = "Looks like rain."
    } else if (weather == "thunderstorm") {
        icon = "thunder.svg";
        description = "Yikes, looks like a storm's brewing!"
    } else if (weather == "snow") {
        icon = "snow.svg";
        description = "Wrap up, it's going to snow!"
    } else if (weather == "mist") {
        icon = "mist.svg";
        description = "Looks a little misty today.";
    } else {
        icon = "default.svg";
        description = "Oops, I couldn't find the weather in " + location;
    }

    document.getElementById("weatherIcon").src = "images/" + icon;
    document.getElementById("description").innerHTML = description;
    document.getElementById("temp").textContent = temperature + " K"; /*kelvin, for celsius: (temperature - 273.15) + " °C"*/
}

最后一行是温度。（我也稍微重组了代码）

然后在 onreadystatechange 处理程序中替换此 if 块

if (json != undefined) {
    var weather = json.weather[0].main
    setIconAndDescription(weather, location)
}

有了这个

if (json != undefined) {
    showWeatherInfo(json)
}

调用从 openweathermap 传入完整天气信息的新函数。

如何从 Open Weather Map 中提取温度信息 API

How to pull temperature info out off Open Weather Map API

javascript

api

temperature

weather-api