Amapmcpdemo
What is Amapmcpdemo
amapMcpDemo is a web application designed to provide restroom location information within Xiangshan Park, utilizing modern front-end technologies to create an intuitive user interface for visitors.
Use cases
Use cases include helping visitors quickly locate restrooms in parks, providing real-time status updates on restroom availability, and offering navigation assistance to enhance the visitor experience.
How to use
Users can access the application by cloning the project repository, installing dependencies with npm, and running the development server. The application can be viewed at http://localhost:3000.
Key features
Key features include a card-based layout for restroom information display, real-time status updates, cleanliness ratings, navigation functionality that integrates with Amap, and a responsive design for various devices.
Where to use
amapMcpDemo is suitable for public parks, tourist attractions, and any location where restroom information is essential for visitor convenience.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Amapmcpdemo
amapMcpDemo is a web application designed to provide restroom location information within Xiangshan Park, utilizing modern front-end technologies to create an intuitive user interface for visitors.
Use cases
Use cases include helping visitors quickly locate restrooms in parks, providing real-time status updates on restroom availability, and offering navigation assistance to enhance the visitor experience.
How to use
Users can access the application by cloning the project repository, installing dependencies with npm, and running the development server. The application can be viewed at http://localhost:3000.
Key features
Key features include a card-based layout for restroom information display, real-time status updates, cleanliness ratings, navigation functionality that integrates with Amap, and a responsive design for various devices.
Where to use
amapMcpDemo is suitable for public parks, tourist attractions, and any location where restroom information is essential for visitor convenience.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
香山公园洗手间导览系统
这是一个为完全没有软件开发经验的用户开发的精美web网站，用于展示香山公园内的洗手间位置信息。通过直观的卡片式界面，游客可以快速了解各个洗手间的位置、状态和设施信息，并支持一键导航功能。
项目简介
本项目采用现代化的前端技术栈，为游客提供便捷的洗手间查询和导航服务。每个洗手间以卡片形式展示，包含详细的位置信息、使用状态、清洁度等信息，并支持点击直接打开高德地图进行导航。
技术栈
- 框架: Next.js 14
- 语言: TypeScript
- 样式: TailwindCSS
- 地图服务: 高德地图 URI API
- UI/UX: 响应式设计，支持移动端和桌面端
功能特点
洗手间信息展示
- 卡片式布局，清晰直观
- 显示洗手间名称和位置
- 实时状态显示（正常使用/维修中）
- 清洁度等级展示
- 最近清洁时间
- 特色设施标签（如无障碍设施、母婴室等）
导航功能
- 点击卡片即可导航
- 自动打开高德地图
- 支持步行导航模式
- 精确的地理坐标定位
用户体验
- 响应式布局设计
- 手机端：单列显示
- 平板端：双列显示
- 桌面端：三列显示
- 无障碍支持
- 键盘导航支持
- ARIA 标签支持
- 适当的颜色对比度
数据覆盖
目前收录的洗手间包括：
- 香山公园北门洗手间
- 香山塔后洗手间
- 索道站洗手间
- 正觉寺洗手间
本地开发
-
克隆项目
```bash
git clone [项目地址]
``` -
安装依赖
```bash
npm install
``` -
启动开发服务器
```bash
npm run dev
``` -
访问 http://localhost:3000 查看效果
构建部署
-
构建项目
```bash
npm run build
``` -
启动生产服务器
```bash
npm run start
```
项目结构
```
├── app/
│ ├── page.tsx # 主页面组件
│ ├── layout.tsx # 布局组件
│ └── globals.css # 全局样式
├── components/
│ └── ToiletCard.tsx # 洗手间信息卡片组件
├── public/ # 静态资源
└── package.json # 项目配置文件
```
贡献指南
欢迎提交 Issue 和 Pull Request 来帮助改进项目。
许可证
MIT License
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
