飞行模式 - 高德地图移动端应用

基于 Vue3 + 高德地图 API 2.0 开发的移动端地图应用，采用暗色主题设计。

功能特性

• 🌙 暗色主题: 采用高德地图暗色样式，适合夜间使用
• 📱 移动端优化: 专为手机和平板设计的响应式界面
• 🎯 精准定位: 支持高精度定位和用户位置显示
• 🗺️ 真3D地图: 支持俯仰角、旋转角的真正3D视图效果
• 🔄 3D/2D切换: 一键切换2D平面和3D立体视图
• 🎮 触摸控制: 优化的触摸缩放、拖拽、旋转体验
• 🔧 自定义控件: 美观的缩放、3D切换和指南针控件

技术栈

• 前端框架: Vue 3 (Composition API)
• 构建工具: Vite
• 地图服务: 高德地图 JavaScript API 2.0
• 样式: CSS3 + 移动端适配

快速开始

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

4. 预览生产版本

npm run preview

项目结构

src/
├── components/
│   └── MapComponent.vue    # 地图组件
├── styles/
│   └── mobile.css         # 移动端样式
├── App.vue                # 主应用组件
└── main.js               # 应用入口

移动端特性

安全区域适配

• 支持刘海屏和底部安全区域
• 使用 env(safe-area-inset-*) 进行适配

触摸优化

• 禁用文本选择和长按菜单
• 优化触摸反馈和按钮大小
• 防止iOS Safari弹性滚动

响应式设计

• 适配不同屏幕尺寸
• 横屏/竖屏自动适应
• 小屏幕和平板优化

地图配置

API Key

项目使用的高德地图API Key: 8818457106563a20a89c07627c832ce3

地图样式

• 默认使用暗色主题: amap://styles/dark
• 支持3D视图模式
• 默认显示北京天安门区域

控件功能

• 定位按钮: 获取用户当前位置
• 图层按钮: 切换地图图层（待实现）
• 菜单按钮: 显示更多选项（待实现）
• 缩放控件: 地图放大缩小
• 指南针: 重置地图方向

开发说明

添加新功能

1. 在 src/components/ 下创建新组件
2. 在 App.vue 中引入和使用
3. 添加相应的移动端样式

自定义地图样式

可以在 MapComponent.vue 中修改 mapStyle 参数：

• amap://styles/normal - 标准样式
• amap://styles/dark - 暗色样式
• amap://styles/light - 浅色样式
• amap://styles/whitesmoke - 烟白样式

移动端调试

建议使用Chrome DevTools的设备模拟器进行移动端调试。

浏览器支持

• iOS Safari 10+
• Android Chrome 60+
• 微信内置浏览器
• 其他现代移动浏览器

许可证

MIT License