# WeatherForecast
**Repository Path**: lclIzzxw/WeatherForecast
## Basic Information
- **Project Name**: WeatherForecast
- **Description**: 这是一个基于 Vue.js 3 构建的现代化天气查询 Web 应用。它集成了数据可视化图表和交互式地图，能够为用户提供直观、详细的城市天气信息，包括当前天气、未来 7 天预报、温度走势图以及地理位置展示。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-20
- **Last Updated**: 2025-12-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
**🌦️ 城市天气查询系统 (City Weather Dashboard)**
这是一个基于 **Vue.js 3** 构建的现代化天气查询 Web 应用。它集成了数据可视化图表和交互式地图，能够为用户提供直观、详细的城市天气信息，包括当前天气、未来 7 天预报、温度走势图以及地理位置展示。
本前端软件天气[图标来源](https://basmilius.github.io/weather-icons/index-fill.html)
## **✨ 主要功能**
* **🔍 城市搜索**: 支持输入城市名称（支持中文拼音或英文）进行全球城市搜索。
* **🌡️ 实时天气**: 显示查询城市的当前温度、天气状况及对应的天气代码。
* **📅 7 天预报卡片**: 以卡片形式直观展示未来一周的天气图标、天气描述及最高/最低气温。
* **📈 温度趋势图**: 使用 **ECharts** 绘制平滑折线图，展示未来一周的最高温和最低温走势。
* **🗺️ 交互式地图**: 使用 **Leaflet** 自动定位到查询城市，支持缩放、平移，并提供多种地图图层切换（街道图、卫星图、地形图等）。
* **📱 响应式布局**: 界面整洁，利用 Flexbox 布局适配不同屏幕区域。
## **🛠️ 技术栈**
本项目纯前端实现，无需后端服务，依赖以下开源库和 API：
### **核心框架与库**
* **HTML5 / CSS3**: 页面结构与样式布局。
* **Vue.js 3 (CDN)**: 用于处理数据绑定、DOM 更新及应用逻辑。
* **ECharts 5 (CDN)**: 用于绘制交互式温度折线图。
* **Leaflet.js (CDN)**: 用于加载地图瓦片和进行地理定位。
### **数据源 API**
1. **OpenWeatherMap Geo API**: 用于将城市名称转换为经纬度坐标。
* 端点: http://api.openweathermap.org/geo/1.0/direct(需要api,请在源码此处添加api,免费拥有)[网址](https://openweathermap.org/api?referrer=grok.com)
```JavaScript
// API密钥
const apiKey = "";
```
2. **Open-Meteo API**: 用于获取详细的气象数据（无需 API Key）。
* 端点: https://api.open-meteo.com/v1/forecast
3. **Weather Icons**: 使用 bmcdn.nl 提供的 SVG 天气图标。[图标来源](https://basmilius.github.io/weather-icons/index-fill.html)
## **📂 文件结构说明**
Plaintext
Project\_Root/
│
├── index.html \# 项目入口文件，包含 HTML 结构和库的引入
├── style.css \# 全局样式文件，定义 Flex 布局和组件样式
├── app.js \# 核心逻辑文件，包含 Vue 实例、API 请求和地图逻辑
├── WeatherWeek.js \# 负责渲染未来 7 天天气卡片的逻辑
└── T\_Curve.js \# 负责初始化和更新 ECharts 温度折线图的逻辑
## **🚀 快速开始**
### **1\. 克隆或下载项目**
将所有文件下载到本地同一个文件夹中。
### **2\. 配置 API Key (可选但推荐)**
在 app.js 文件顶部，默认提供了一个 OpenWeatherMap 的测试 Key。为了保证稳定性，建议替换为您自己的 Key：
JavaScript
// app.js 第 4 行
const apiKey \= "YOUR\_OPENWEATHERMAP\_API\_KEY";
### **3\. 运行项目**
由于使用了 ES6 模块和部分跨域资源，建议使用本地服务器运行，而不是直接双击打开 HTML 文件。
**方法 A：使用 VS Code Live Server 插件（推荐）**
1. 在 VS Code 中打开项目文件夹。
2. 右键点击 index.html。
3. 选择 "Open with Live Server"。
方法 B：使用 Python
在项目目录下打开终端，运行：
Bash
\# Python 3
python \-m http.server 8000
然后在浏览器访问 http://localhost:8000。
## **📖 使用指南**
https://github.com/user-attachments/assets/23b3f391-356d-41d1-82ee-a6b4b9d7921d
1. **输入城市**: 在页面左上角的输入框中输入城市名称（例如："Beijing", "London", "Shanghai"）。
2. **点击查询**: 点击“查询天气”按钮。
3. **查看结果**:
* **左上区域**: 显示正在查询的状态以及查询成功后的当前简要天气。
* **右上区域**: 显示未来一周的文字版摘要。
* **中间横排**: 显示 7 张精美的天气卡片。
* **左下区域**: 查看未来一周的温度变化曲线。
* **右下区域**: 地图自动飞往该城市。你可以点击地图右上角的图层控制器切换“卫星图”或“地形图”。
## **🧩 代码模块详解**
### **app.js**
* 初始化 Vue 应用。
* getWeather(): 处理用户输入，调用 Geo API 获取经纬度。
* getWeatherOfCity(): 根据经纬度调用 Open-Meteo 获取气象数据。
* getWeatherCode(): 一个巨大的 switch 函数，将 WMO 天气代码转换为中文描述和 Emoji。
* map: Leaflet 地图的初始化、图层控制和 flyTo 动画逻辑。
### **T\_Curve.js**
* 使用 ECharts 初始化图表实例。
* updateChart(data): 接收 API 数据，解析最高/最低气温，并配置图表的渐变色样式和 Tooltip。
### **WeatherWeek.js**
* WeatherWeek(data): 处理每日天气数据。
* getWeatherIcon(code): 根据天气代码返回对应的 SVG 图标 URL。
* updateWeatherCard(...): 动态更新 DOM 中的卡片 HTML 内容。