使用OpenWeatherMap API轻松获取天气数据

最新推荐文章于 2024-10-03 20:14:40 发布

小鸿同学吖

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量762

点赞数 14

文章标签：前端

本文链接：https://blog.csdn.net/weixin_53154312/article/details/142463627

版权

将使用HTML、CSS和JavaScript来构建用户界面，并利用OpenWeatherMap的API来获取实时天气数据。

一、注册OpenWeatherMap账号并获取API密钥

首先，你需要访问OpenWeatherMap官方网站并注册一个账号。注册完成后，登录到你的账户，在“API keys”标签页中生成一个新的API密钥。请妥善保管你的API密钥，不要泄露给他人。

二、使用API密钥调用天气数据

有了API密钥后，你就可以调用OpenWeatherMap的API来获取天气数据了，以下是一个简单的示例。

代码介绍：

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <!-- 引入CSS样式文件 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>天气预报</h1>
        <!-- 输入城市名称的文本框 -->
        <input type="text" id="city" placeholder="输入城市名称">
        <!-- 查询天气的按钮，点击时调用getWeather函数 -->
        <button onclick="getWeather()">查询</button>
        <!-- 显示天气数据的容器 -->
        <div id="weatherData"></div>
    </div>
    <!-- 引入JavaScript脚本文件 -->
    <script src="script.js"></script>
</body>
</html>

styles.css

/* 设置整个页面的字体、背景色、边距和内边距 */
body {
    font-family: Arial, sans-serif; /* 使用Arial字体，如果不可用则使用无衬线字体 */
    background-color: #f4f4f4; /* 设置背景色为浅灰色 */
    margin: 0; /* 外边距为0 */
    padding: 0; /* 内边距为0 */
}

/* 设置容器的最大宽度、居中显示、内边距、背景色和阴影效果 */
.container {
    max-width: 600px; /* 最大宽度600像素 */
    margin: 50px auto; /* 上下外边距50像素，左右自动居中 */
    padding: 20px; /* 内边距20像素 */
    background-color: #fff; /* 背景色为白色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    text-align: center; /* 文本居中显示 */
}

/* 设置文本框的内边距 */
input[type="text"] {
    padding: 10px; /* 内边距10像素 */
    width: 200px; /* 宽度200像素，可根据需要调整 */
}

/* 可以根据需要添加更多样式 */

script.js

// 获取城市名称输入框和天气数据显示容器的元素引用
const cityInput = document.getElementById('city');
const weatherData = document.getElementById('weatherData');

// 定义获取天气的函数
function getWeather() {
    // 从输入框获取城市名称
    const city = cityInput.value;
    if (!city) {
        alert('请输入城市名称！');
        return;
    }
    
    // 使用OpenWeatherMap API获取天气数据（需要替换YOUR_API_KEY为实际的API密钥）
    const apiKey = ''; // 请替换为你的OpenWeatherMap API密钥
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
    
    // 发起网络请求获取天气数据
    fetch(apiUrl)
        .then(response => response.json()) // 解析JSON数据
        .then(data => {
            // 在控制台打印天气数据（可选，用于调试）
            console.log(data);
            
            // 更新天气数据显示容器的内容（此处仅显示简单信息，可根据需要扩展）
            weatherData.innerHTML = `
                <h2>${data.name} 的天气</h2>
                <p>温度: ${data.main.temp} °C</p>
                <p>天气: ${data.weather[0].description}</p>
            `;
        })
        .catch(error => {
            // 处理网络请求错误或API返回的错误信息
            weatherData.innerHTML = '<p>获取天气数据失败，请检查城市名称或网络连接。</p>';
            console.error('Error fetching weather data:', error);
        });
}

运行结果展示：*以茂名为例，因为我的家乡是茂名的*