入门15分钟
天气查询API完整使用指南
基于Open-Meteo免费天气API，手把手教你实现天气查询功能，包含经纬度获取、数据解析、错误处理等完整流程。
天气Open-MeteoREST APIJavaScript
前提条件
- •了解 JavaScript 基础知识
- •了解 REST API 的基本概念
- •一个现代浏览器（用于测试）
什么是天气API？
天气API（Application Programming Interface）是一种允许开发者获取天气数据的接口服务。通过调用天气API，你可以获取实时的温度、湿度、风速、空气质量等信息，无需自己建立气象监测站。
Free API Hub 整合了多个免费天气API，其中 Open-Meteo 是最受欢迎的选择之一，因为它完全免费且不需要API密钥。
为什么选择 Open-Meteo？
Open-Meteo 是一个开源的天气API服务，提供以下优势：
1. **完全免费**：无需注册、无需API密钥、无调用次数限制 2. **数据丰富**：包含温度、湿度、风速、降水、紫外线指数等 3. **全球覆盖**：支持全球任何地点的天气查询 4. **高精度**：基于多个气象模型的综合数据 5. **多语言支持**：返回JSON格式，易于解析
📖完整教程
1
第一步：获取API地址
Open-Meteo 的基础API地址是 https://api.open-meteo.com/v1/forecast，你需要在这个地址后面添加查询参数来指定位置和需要的数据类型。
bash
# 基础格式
https://api.open-meteo.com/v1/forecast
# 带参数的完整请求示例
https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074¤t_weather=true💡 提示
- •latitude（纬度）和 longitude（经度）是必需参数
- •你可以使用地图服务或搜索引擎获取任意地点的坐标
- •北京坐标：纬度 39.9042，经度 116.4074
2
第二步：选择需要的数据参数
Open-Meteo 提供了丰富的天气参数，你需要通过参数指定想要获取哪些数据。
bash
# 获取当前天气
https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074¤t_weather=true
# 获取小时预报（7天）
https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074&hourly=temperature_2m,relative_humidity_2m
# 获取每日预报
https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074&daily=temperature_2m_max,temperature_2m_min,precipitation_sum
# 获取全部常用数据
https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074¤t_weather=true&hourly=temperature_2m,relative_humidity_2m,precipitation,windspeed_10m,uv_index&daily=temperature_2m_max,temperature_2m_min,precipitation_sum,uv_index_max&timezone=Asia/Shanghai💡 提示
- •current_weather=true 获取当前天气数据
- •hourly= 参数获取每小时的预报数据
- •daily= 参数获取每日预报数据
- •timezone=Asia/Shanghai 确保返回北京时间
3
第三步：在JavaScript中调用API
使用 fetch API 在浏览器或 Node.js 中调用天气API。
javascript
// 基础调用示例
async function getWeather() {
const lat = 39.9042; // 北京纬度
const lon = 116.4074; // 北京经度
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true`;
try {
const response = await fetch(url);
const data = await response.json();
console.log('当前天气：', data.current_weather);
// 输出: { temperature: 25, windspeed: 12.3, weathercode: 3, ... }
return data.current_weather;
} catch (error) {
console.error('获取天气失败：', error);
}
}
getWeather();💡 提示
- •使用 async/await 使代码更清晰
- •使用 try/catch 捕获错误
- •API返回的是JSON格式，无需解析
4
第四步：解析和使用天气数据
API返回的数据包含多个字段，下面介绍如何解析和显示这些数据。
javascript
// 完整的天气数据获取和处理
async function getWeatherData(lat, lon) {
const url = `https://api.open-meteo.com/v1/forecast?${
`latitude=${lat}&longitude=${lon}` +
`¤t_weather=true` +
`&hourly=temperature_2m,relative_humidity_2m,uv_index` +
`&daily=temperature_2m_max,temperature_2m_min,precipitation_sum` +
`&timezone=Asia/Shanghai&forecast_days=7`
}`;
const response = await fetch(url);
const data = await response.json();
// 当前天气
const current = data.current_weather;
console.log(`当前温度: ${current.temperature}°C`);
console.log(`风速: ${current.windspeed} km/h`);
console.log(`天气代码: ${current.weathercode}`);
// 天气预报
const daily = data.daily;
console.log('7天预报:');
for (let i = 0; i < 7; i++) {
console.log(`Day ${i}: ${daily.temperature_2m_min[i]}°C ~ ${daily.temperature_2m_max[i]}°C`);
}
return {
current,
hourly: data.hourly,
daily: data.daily
};
}
// 获取北京的天气
getWeatherData(39.9042, 116.4074);python
import requests
def get_weather(lat, lon):
url = "https://api.open-meteo.com/v1/forecast"
params = {
"latitude": lat,
"longitude": lon,
"current_weather": True,
"hourly": "temperature_2m,relative_humidity_2m",
"daily": "temperature_2m_max,temperature_2m_min,precipitation_sum",
"timezone": "Asia/Shanghai"
}
response = requests.get(url, params=params)
data = response.json()
current = data["current_weather"]
print(f"当前温度: {current['temperature']}°C")
print(f"风速: {current['windspeed']} km/h")
return data
# 获取北京天气
get_weather(39.9042, 116.4074)💡 提示
- •天气代码 (weathercode) 遵循 WMO 标准，0=晴，1-3=多云，45-48=雾
- •temperature_2m 表示2米高度的气温
- •precipitation_sum 表示降水量（毫米）
🔧常见问题与解决方案
TypeError: Failed to fetch
解决方案：检查网络连接，确保API地址正确。如果是跨域问题，考虑使用后端代理。
CORS 跨域错误
解决方案：浏览器默认阻止跨域请求。解决方案：1) 使用后端转发请求 2) 使用 JSONP（如果API支持）3) 使用代理服务器
返回的数据为空或不完整
解决方案：检查经纬度坐标是否正确，确保在有效范围内（纬度-90到90，经度-180到180）。