# travel

**Repository Path**: daonna/travel

## Basic Information

- **Project Name**: travel
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-04
- **Last Updated**: 2025-10-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 苏州旅行助手

一个专为苏州旅行设计的精美移动端 React 应用，集成高德地图服务，提供智能行程管理、实时导航、天气查询等功能。

## ✨ 功能特色

### 🗓️ 智能行程管理
- **详细行程安排** - 基于您提供的苏州旅行计划
- **实时时间轴** - 显示当前进度和下一站信息
- **状态跟踪** - 已完成、进行中、待开始状态一目了然

### 🗺️ 地图与导航
- **交互式地图** - 显示所有行程地点
- **实时导航** - 当前位置到下一站的最优路线
- **一键导航** - 直接打开高德地图进行导航

### 🌤️ 天气服务
- **实时天气** - 苏州当前天气状况
- **穿衣建议** - 根据天气和温度提供穿衣建议
- **自动刷新** - 定时更新天气信息

### 📱 移动端优化
- **响应式设计** - 专为手机屏幕优化
- **触摸友好** - 支持手势操作
- **PWA 支持** - 可安装到手机桌面

## 🚀 快速开始

### 环境要求
- Node.js 16+ 
- npm 或 yarn

### 安装依赖
```bash
cd suzhou-travel-app
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 📱 使用说明

### 主要功能

1. **查看行程安排**
   - 时间轴显示完整行程
   - 当前项目高亮显示
   - 点击查看详细信息

2. **实时导航**
   - 自动获取当前位置
   - 计算到下一站的最优路线
   - 一键打开高德地图导航

3. **天气查询**
   - 实时苏州天气信息
   - 温度、湿度、风力等详细数据
   - 智能穿衣建议

4. **地图查看**
   - 所有行程地点标记
   - 当前位置显示
   - 点击标记查看详情

### 行程安排

**10月6日（周六）**
- 14:01 高铁抵达苏州
- 14:30 宜必思乐桥店放行李
- 16:40 伟记吃面
- 17:10 拙政园游览
- 18:50 平江路夜游
- 21:00 返回酒店休息

**10月7日（周日）**
- 07:30 酒店退房
- 08:30 旺山徒步环线（8km）
- 12:30 酒店取行李
- 13:00 前往苏州站
- 20:09 高铁返沪

## 🛠️ 技术栈

- **React 18** - 现代化 UI 框架
- **TypeScript** - 类型安全
- **Tailwind CSS** - 响应式样式
- **高德地图 API** - 地图和导航服务
- **Lucide React** - 图标库
- **Vite** - 快速构建工具

## 📁 项目结构

```
src/
├── components/          # React 组件
│   ├── Header.tsx      # 头部组件
│   ├── WeatherCard.tsx # 天气卡片
│   ├── Timeline.tsx    # 行程时间轴
│   ├── MapView.tsx     # 地图视图
│   └── NavigationCard.tsx # 导航卡片
├── services/           # API 服务
│   └── amapService.ts  # 高德地图服务
├── data/              # 数据文件
│   └── itinerary.ts   # 行程数据
├── types/             # TypeScript 类型
│   └── index.ts       # 类型定义
├── App.tsx            # 主应用组件
├── main.tsx           # 应用入口
└── index.css          # 全局样式
```

## 🔧 配置说明

### 高德地图 API Key
应用使用的高德地图 API Key: `自己的Key`

如需更换，请修改 `src/services/amapService.ts` 文件中的 `AMAP_API_KEY` 常量。

### 环境变量
可以创建 `.env` 文件来配置环境变量：

```env
VITE_AMAP_API_KEY=your_api_key_here
```

## 📱 移动端使用

### 安装到手机
1. 在手机浏览器中打开应用
2. 点击浏览器菜单中的"添加到主屏幕"
3. 应用将作为 PWA 安装到手机桌面

### 权限设置
- **位置权限** - 用于获取当前位置和导航
- **网络权限** - 用于获取天气和地图数据

## 🎨 设计特色

- **现代化 UI** - 简洁美观的界面设计
- **渐变背景** - 蓝色渐变背景营造清新感
- **卡片布局** - 信息层次清晰
- **动画效果** - 流畅的交互动画
- **响应式** - 适配各种屏幕尺寸

## 🔍 功能详解

### 智能行程管理
- 自动识别当前时间对应的行程项目
- 实时更新行程状态
- 提供详细的行程说明和注意事项

### 实时导航
- 基于高德地图 API 的路线规划
- 实时计算距离和预计时间
- 支持多种交通方式

### 天气服务
- 集成高德天气 API
- 提供详细的天气信息
- 智能穿衣建议

### 地图集成
- 动态加载高德地图
- 标记所有行程地点
- 支持地图交互和信息展示

## 🚨 注意事项

1. **网络连接** - 需要稳定的网络连接获取地图和天气数据
2. **位置权限** - 需要允许位置权限才能使用导航功能
3. **API 配额** - 注意高德地图 API 的调用频率限制
4. **浏览器兼容** - 建议使用现代浏览器以获得最佳体验

## 📞 技术支持

如有问题或建议，请检查：
1. 网络连接是否正常
2. 浏览器是否支持地理位置
3. 高德地图 API 是否正常
4. 控制台是否有错误信息

## 📄 许可证

本项目仅供学习和个人使用。

---

**祝您苏州旅行愉快！** 🎉