谷歌地图MCP Web应用程序
一个现代的Next.js web应用程序，通过模型上下文协议（MCP）服务器与谷歌地图集成。此应用程序提供基于位置的待办事项管理和谷歌地图搜索功能。
特性
- 🗺️ 谷歌地图集成：搜索地点、获取路线和查看地点详细信息
- ✅ 基于位置的待办事项管理：创建带有位置附件的待办事项
- 🚀 Azure云部署：已准备好部署到Azure静态Web应用程序
- 📱 响应式设计：适用于台式机和移动设备
- 🎨 现代用户界面：使用Tailwind CSS和Lucide React图标构建
使用的技术
- 前端Next.js 15、React 19、TypeScript
- 样式：顺风CSS
- 图标：Lucide React
- MCP集成：通过流式HTTP访问谷歌地图MCP服务器
- 部署：Azure静态Web应用程序
谷歌地图MCP集成
此应用程序使用托管的Streamable HTTP端点连接到Google Maps MCP服务器：
{
"mcpServers": {
"google-maps": {
"transport": "streamableHttp",
"url": "https://mcp.open-mcp.org/api/server/google-maps@latest/mcp"
}
}
}可用特征
地图界面
- 搜索地点和地点
- 获取详细的地点信息
- 计算位置之间的方向
- 查看位置评级和联系信息
计划管理
- 创建基于位置的待办事项
- 设置优先级（高、中、低）
- 添加截止日期和说明
- 获取待办事项地点的路线
- 标记全部完成
- 使用localStorage的持久存储
入门指南
先决条件
- Node.js 18或更高版本
- npm或yarn包管理器
安装
- 克隆存储库:
git clone
cd "todo on maps"- 安装依赖项:
npm install- 运行开发服务器:
npm run dev- 在浏览器中打开:
引导到 http://localhost:3000
为生产而建
npm run buildAzure部署
此应用程序已配置为部署到Azure静态Web应用程序。
先决条件
- Azure帐户
- GitHub存储库
部署步骤
- 创建Azure静态Web应用程序:
- 转到Azure门户 - 创建新的静态Web应用程序资源 - 连接到您的GitHub存储库 - 选择构建预设：“Next.js” - 将构建位置设置为“/” - 将输出位置设置为“out”
- 配置GitHub机密:
- 添加 AZURE_STATIC_WEB_APPS_API_TOKEN 存储库机密
- 部署:
- 推送到主分支 - GitHub Actions将自动构建和部署
配置文件
staticwebapp.config.json：Azure静态Web应用程序配置.github/workflows/azure-static-web-apps.yml：CI/CD管道next.config.js：用于静态导出的Next.js配置
项目结构
src/
├── app/
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Main page component
├── components/
│ ├── todo/
│ │ └── TodoManager.tsx # Todo management interface
│ ├── GoogleMapsInterface.tsx # Maps search interface
│ └── Navigation.tsx # Navigation component
└── lib/
└── mcp-client.ts # MCP client implementationAPI使用
谷歌地图MCP客户端
该应用程序包括一个用于Google Maps MCP服务器的TypeScript客户端：
const mcpClient = new GoogleMapsMCPClient();
// Search for places
const places = await mcpClient.searchPlaces("restaurants near me");
// Get place details
const details = await mcpClient.getPlaceDetails(placeId);
// Get directions
const directions = await mcpClient.getDirections("origin", "destination");环境变量
应用程序使用以下环境变量：
GOOGLE_MAPS_MCP_URL：谷歌地图MCP服务器的URL（在next.config.js中配置）
贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 如果适用，添加测试
- 提交拉取请求
许可证
该项目根据MIT许可证获得许可。
支持
对于问题和疑问：
- 检查 问题 章节
- 创建包含详细信息的新问题
- 包括重现任何错误的步骤
路线图
- \[\]添加地图可视化组件
- \[\]实现用户身份验证
- \[\]添加实时位置跟踪
- \[\]与日历API集成
- \[\]添加离线功能
- \[\]实现推送通知
部署状态
- ✅ 项目设置完成
- ✅ MCP集成已实施
- ✅ 已创建UI组件
- ✅ Azure配置就绪
- ⏳ 等待Azure部署