amapMcpDemo

[This is a Chinese README. English translation is not available yet.] # 香山公园洗手间导览系统 这是一个为完全没有软件开发经验的用户开发的精美web网站，用于展示香山公园内的洗手间位置信息。通过直观的卡片式界面，游客可以快速了解各个洗手间的位置、状态和设施信息，并支持一键导航功能。 ## 项目简介 本项目采用现代化的前端技术栈，为游客提供便捷的洗手间查询和导航服务。每个洗手间以卡片形式展示，包含详细的位置信息、使用状态、清洁度等信息，并支持点击直接打开高德地图进行导航。 ## 技术栈 - **框架**: Next.js 14 - **语言**: TypeScript - **样式**: TailwindCSS - **地图服务**: 高德地图 URI API - **UI/UX**: 响应式设计，支持移动端和桌面端 ## 功能特点 ### 洗手间信息展示 - 卡片式布局，清晰直观 - 显示洗手间名称和位置 - 实时状态显示（正常使用/维修中） - 清洁度等级展示 - 最近清洁时间 - 特色设施标签（如无障碍设施、母婴室等） ### 导航功能 - 点击卡片即可导航 - 自动打开高德地图 - 支持步行导航模式 - 精确的地理坐标定位 ### 用户体验 - 响应式布局设计 - 手机端：单列显示 - 平板端：双列显示 - 桌面端：三列显示 - 无障碍支持 - 键盘导航支持 - ARIA 标签支持 - 适当的颜色对比度 ## 数据覆盖 目前收录的洗手间包括： 1. 香山公园北门洗手间 2. 香山塔后洗手间 3. 索道站洗手间 4. 正觉寺洗手间 ## 本地开发 1. 克隆项目 \`\`\`bash git clone [项目地址] \`\`\` 2. 安装依赖 \`\`\`bash npm install \`\`\` 3. 启动开发服务器 \`\`\`bash npm run dev \`\`\` 4. 访问 http://localhost:3000 查看效果 ## 构建部署 1. 构建项目 \`\`\`bash npm run build \`\`\` 2. 启动生产服务器 \`\`\`bash npm run start \`\`\` ## 项目结构 \`\`\` ├── app/ │ ├── page.tsx # 主页面组件 │ ├── layout.tsx # 布局组件 │ └── globals.css # 全局样式 ├── components/ │ └── ToiletCard.tsx # 洗手间信息卡片组件 ├── public/ # 静态资源 └── package.json # 项目配置文件 \`\`\` ## 贡献指南 欢迎提交 Issue 和 Pull Request 来帮助改进项目。 ## 许可证 MIT License