使用 Vanilla JavaScript 的天气应用程序

以下方法介绍如何使用 Open Weather Map API 在 Vanilla JavaScript 中创建一个天气应用程序。使用此 API，我们可以获取每个坐标的天气数据。

项目设置：

步骤 1： 现在，前往 https://openweathermap.org/ 创建一个账号并获取 API 密钥。
步骤 2： 在此之后，您可以创建一个文件夹，例如 index.html 和 script.js 文件。
步骤 3： 我们可以使用以下方法获取地理坐标：
- 通过地理坐标 – 经度和纬度调用 API
- 通过城市 ID 调用 API

api.openweathermap.org/data/2.5/weather?id={city id}&appid={API key}

示例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <!--The CSS styling-->
    <style> 
    * { 
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
    } 
    body { 
        height: 100vh; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        background: linear-gradient(rgb(123, 184, 104), rgb(13, 87, 10)); 
        font-size: 2rem; 
        font-family: sans-serif; 
        color: rgb(7, 9, 10); 
    } 
    .container { 
        height: 20rem; 
        width: 15rem; 
        background-color: rgb(152, 228, 165); 
        text-align: center; 
        padding-top: 12px; 
        border-radius: 16px; 
        border: 2px solid rgb(14, 43, 1); 
    } 
    </style> 
</head> 
<body> 
    <div class="container"> 
    <div class="icon">---</div> 
    <div class="temp">-°C</div> 
    <div class="summary">----</div> 
    <div class="location"></div> 
    </div> 
    <!--Linking the javascript code-->
    <script src="script.js"></script> 
</body> 
</html>

Javascript代码

// Declaring the variables 
let lon; 
let lat; 
let temperature = document.querySelector(".temp"); 
let summary = document.querySelector(".summary"); 
let loc = document.querySelector(".location"); 
let icon = document.querySelector(".icon"); 
const kelvin = 273; 
  
window.addEventListener("load", () => { 
  if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition((position) => { 
      console.log(position); 
      lon = position.coords.longitude; 
      lat = position.coords.latitude; 
  
      // API ID 
      const api = "6d055e39ee237af35ca066f35474e9df"; 
  
      // API URL 
      const base = 
`http://api.openweathermap.org/data/2.5/weather?lat= ${lat}&` + `lon=$ {lon}&appid=6d055e39ee237af35ca066f35474e9df`; 
  
      // Calling the API 
      fetch(base) 
        .then((response) => { 
          return response.json(); 
        }) 
        .then((data) => { 
          console.log(data); 
          temperature.textContent =  
              Math.floor(data.main.temp - kelvin) + "°C"; 
          summary.textContent = data.weather[0].description; 
          loc.textContent = data.name + "," + data.sys.country; 
          let icon1 = data.weather[0].icon; 
          icon.innerHTML =  
              `<img src="icons/${icon1}.svg" style= 'height:10rem'/>`; 
        }); 
    }); 
  } 
});

输出：

使用 Vanilla JavaScript 的天气应用程序