从零构建AI智能行程助手：MCP协议+大模型+地图服务实战

偶尔上线经常挺尸 偶尔上线经常挺尸
征文大赛 2026-05-22
从零构建AI智能行程助手：MCP协议+大模型+地图服务实战

【腾讯位置服务开发者征文大赛】从零构建AI智能行程助手：MCP协议+大模型+地图服务实战

作者: 偶尔上线经常挺尸
发布时间: 已于 2026-04-14 10:17:27 修改
来源: https://blog.csdn.net/luoyin114514/article/details/160118133

当AI学会“看地图”，出行规划只需一句话

一、前言：当AI遇到地图，出行体验正在被重新定义

想象这样一个场景：你对手机说“帮我规划一个周末北京一日游，要轻松一点的路线，中午想吃烤鸭”，AI自动生成行程、在地图上标注景点、规划路线、推荐餐厅，最后还能一键分享给同行好友。

这不再是科幻电影里的桥段。

2026年3月，腾讯地图V11.0大版本上线，首次推出面向“多人出行”场景的AI一站式行程管理功能。与此同时，腾讯位置服务联合CSDN发起了以“AI赋能，重塑地图智能新体验”为主题的开发者征文大赛，鼓励开发者将大模型能力与地图服务深度融合。

本文将从零开始，手把手带你构建一个AI智能行程助手——用自然语言驱动地图服务，让AI成为你的专属旅行规划师。

技术栈预览：

  • 前端：HTML5 + 腾讯地图JavaScript API GL
  • AI能力：Claude API / 任意大模型（支持工具调用/Tool Calling）
  • 地图服务：腾讯位置服务WebServiceAPI + MCP Server
  • 核心亮点：自然语言→意图识别→工具调用→地图可视化

二、技术选型：为什么选择腾讯位置服务？

在开始编码之前，先聊聊技术选型的考量。

2.1 腾讯位置服务MCP Server：AI与地图的“翻译官”

MCP（Model Context Protocol）是当前AI应用开发中的热门协议，它解决了大模型与外部工具之间的“语言不通”问题。腾讯位置服务官方推出了基于MCP协议的MCP Server，开发者无需在本地部署服务，简单配置即可让大模型调用地图能力。

MCP Server中集成了以下核心工具：

MCP的核心价值：大模型不需要知道如何调用HTTP API、如何解析JSON、如何处理错误——这些都由MCP Server封装好了。AI只需理解用户的自然语言意图，选择对应的工具，传入参数即可。

2.2 为什么不用纯前端方案？

如果只做纯前端的地图展示，直接调用JavaScript API就够了。但我们的目标是让AI理解用户意图并自动调用地图能力，这需要：

  1. 大模型的理解能力：解析用户自然语言，提取关键信息（地点、时间、偏好）
  2. 工具调用能力：根据意图选择合适的API并构造参数
  3. 结果整合能力：将地图数据与用户需求结合，生成可读性强的回复

因此，本文方案的核心是：大模型作为“大脑”，地图服务作为“手脚”。

三、核心实现：AI智能行程助手三步走

3.1 第一步：申请腾讯位置服务Key

在开始编码前，需要完成以下准备工作：

  1. 访问腾讯位置服务官网注册账号
  2. 进入控制台 → 应用管理 → 我的应用 → 创建应用
  3. 添加Key，务必勾选WebServiceAPI权限（这是调用MCP和WebAPI的基础）
  4. 如果是小程序开发，还需要在小程序后台配置request合法域名：https://apis.map.qq.com（参考）

注意：MCP Server依赖WebServiceAPI，如果Key未开启对应权限，调用会失败。

3.2 第二步：接入MCP Server实现AI工具调用

这是整个项目的核心——让大模型能够“调用”地图服务。

MCP Server连接配置：

腾讯位置服务MCP Server已在腾讯云托管，采用SSE方式连接，无需本地部署。配置步骤如下：

javascript

// MCP Server连接配置示例（以Claude Desktop为例）
{
  "mcpServers": {
    "tencent-lbs": {
      "url": "https://mcp.tencent.com/lbs/sse",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

配置完成后，大模型会自动识别MCP Server中提供的工具。当用户输入自然语言查询时，大模型会：

  1. 分析用户意图（是搜索周边？规划路线？查天气？）
  2. 选择对应的MCP工具
  3. 从用户输入中提取参数（地点、坐标、关键词等）
  4. 调用工具并获取结果
  5. 将结果整理成自然语言回复

以“搜索附近咖啡馆”为例：

用户输入：“附近有哪些适合办公的咖啡馆？”

大模型内部处理流程：

  • 意图识别 → 周边搜索（placeSearchNearby）
  • 参数提取 → keyword=“咖啡馆”，boundary=当前位置
  • 调用MCP工具 → 返回POI列表
  • 结果整合 → “为您找到以下3家咖啡馆：星巴克（距离200m，有插座）、Costa（距离350m，环境安静）…”

3.3 第三步：前端地图可视化

当AI返回POI数据或路线规划结果后，我们需要在地图上将其可视化展示。

初始化地图：

javascript

// 引入腾讯地图JavaScript API GL
// 在HTML中引入脚本
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

// 初始化地图
const map = new TMap.Map(document.getElementById('container'), {
    center: new TMap.LatLng(39.908823, 116.397470), // 北京天安门
    zoom: 12
});

在地图上标注POI点：

javascript

// 添加标记点
const marker = new TMap.MultiMarker({
    map: map,
    geometries: [{
        id: '1',
        styleId: 'poi',
        position: new TMap.LatLng(39.908823, 116.397470),
        properties: {
            title: '天安门广场'
        }
    }]
});

// 添加信息窗口
const infoWindow = new TMap.InfoWindow({
    map: map,
    position: new TMap.LatLng(39.908823, 116.397470),
    content: '<div><strong>天安门广场</strong><br>开放时间：全天</div>'
}).open();

绘制路线：

javascript

// 路线规划结果可视化
const polyline = new TMap.MultiPolyline({
    map: map,
    geometries: [{
        id: 'route',
        styleId: 'route',
        paths: routePoints, // 从路线规划API获取的坐标点数组
        properties: {
            distance: '5.2km',
            duration: '20分钟'
        }
    }],
    styles: {
        'route': new TMap.PolylineStyle({
            color: '#3777FF',
            width: 6,
            borderWidth: 2,
            borderColor: '#FFFFFF'
        })
    }
});

四、完整Demo：一句话生成周末旅行计划

4.1 Demo场景描述

用户输入：“帮我规划一个杭州周末两日游，第一天想去西湖和灵隐寺，第二天想去西溪湿地，住宿在湖滨银泰附近，要轻松一点的节奏。”

AI处理流程：

Step 1 - 解析用户需求：

  • 目的地：杭州
  • 天数：2天
  • 景点：西湖、灵隐寺（第一天）、西溪湿地（第二天）
  • 住宿区域：湖滨银泰
  • 节奏偏好：轻松（意味着每日景点不超过3个，预留充足休息时间）

Step 2 - 调用地图服务：

  • 使用placeSuggestion获取各景点的精确坐标
  • 使用directionWalking/Driving计算景点间的距离和耗时
  • 使用placeSearchNearby查找湖滨银泰附近的酒店推荐
  • 使用weather查询杭州周末天气

Step 3 - 生成行程并可视化：

  • 按时间线组织行程
  • 在地图上标注所有景点和酒店位置
  • 绘制每日路线
  • 生成可分享的行程卡片

4.2 Demo效果展示（截图示意）

注：以下为Demo运行效果的文字描述，实际运行截图请见文末链接。

界面一：对话输入界面 用户输入自然语言查询，AI实时解析意图并调用地图服务。

界面二：地图可视化界面

  • 红色标记点为景点
  • 蓝色标记点为酒店
  • 彩色线条为每日行程路线（第一天用蓝色，第二天用绿色）
  • 信息窗口展示景点简介、开放时间、建议游玩时长

界面三：行程总结卡片

  • 每日行程安排（时间、地点、活动）
  • 交通建议（步行/打车/公交）
  • 美食推荐（周边餐厅）
  • 天气提示（穿衣建议）

五、关键技术点解析

5.1 意图识别与参数提取

这是整个方案中最核心的技术难点。用户输入是千变万化的自然语言，如何从中准确提取结构化参数？

方案一：大模型原生能力 使用支持Function Calling/Tool Calling的大模型（如Claude 3.5、GPT-4o），定义好工具的参数schema，让模型自动完成参数提取。

javascript

// 定义周边搜索工具的参数schema
{
  "name": "searchNearby",
  "description": "搜索指定位置周边的POI",
  "parameters": {
    "type": "object",
    "properties": {
      "keyword": { "type": "string", "description": "搜索关键词，如咖啡馆、餐厅" },
      "location": { "type": "string", "description": "中心点坐标，格式：lat,lng" },
      "radius": { "type": "number", "description": "搜索半径，单位米，默认1000" }
    },
    "required": ["keyword"]
  }
}

方案二：提示词工程 如果使用的模型不支持Function Calling，可以通过精心设计的提示词引导模型输出JSON格式的参数。

5.2 多人出行场景的汇合点推荐

这是腾讯地图V11.0重点优化的场景。实现思路：

  1. 获取所有参与者的出发位置
  2. 计算每两个人之间的中点
  3. 在中点附近搜索合适的汇合地点（咖啡馆、地铁站、商场等）
  4. 综合评估各候选点的可达性、便利性、环境评分

python

# 汇合点推荐算法伪代码
def recommend_meeting_point(locations):
    # locations: 所有参与者的位置坐标列表
    center = calculate_geometric_center(locations)
    # 搜索中心点周边的POI
    pois = search_pois_nearby(center, types=["cafe", "subway", "mall"])
    # 计算每个POI到各出发点的总距离
    for poi in pois:
        total_distance = sum(distance(poi, loc) for loc in locations)
        poi["total_distance"] = total_distance
    # 按总距离排序，返回最优结果
    return sorted(pois, key=lambda x: x["total_distance"])[0]

5.3 性能优化：路线规划缓存

在实际应用中，同一个起点和终点的路线规划结果短时间内不会变化。可以建立缓存机制：

  • Key：起点坐标|终点坐标|出行方式
  • Value：路线规划结果（距离、耗时、路线点串）
  • TTL：1小时（考虑实时路况变化）

六、项目源码与运行指南

6.1 环境要求

  • Node.js 16+ （用于本地开发服务器）
  • 现代浏览器（Chrome/Firefox/Safari最新版）
  • 腾讯位置服务Key（需开启WebServiceAPI权限）

6.2 快速启动

bash

# 克隆项目
git clone https://github.com/yourname/ai-travel-planner.git

# 安装依赖
npm install

# 配置环境变量
# 创建.env文件，填入以下内容
echo "TENCENT_MAP_KEY=你的Key" >> .env
echo "AI_API_KEY=你的大模型API Key" >> .env

# 启动开发服务器
npm run dev

6.3 核心代码结构

text

ai-travel-planner/
├── src/
│   ├── index.html          # 主页面
│   ├── app.js              # 主逻辑：AI对话+地图交互
│   ├── map-service.js      # 腾讯地图服务封装
│   ├── mcp-client.js       # MCP协议客户端
│   └── styles.css          # 样式
├── demo-screenshots/       # Demo截图
└── README.md               # 项目说明

6.4 演示视频

暂无，后续将会上架微信公众号。请关注：第404号实验室或扫描下文二维码

七、踩坑经验与优化方向

7.1 踩过的坑

坑1：坐标格式不统一 腾讯位置服务API有的返回lat,lng字符串，有的返回{lat, lng}对象。建议统一封装转换函数。

坑2：MCP调用超时 某些大模型响应较慢，建议设置合理的超时时间（推荐30秒），并在前端展示“AI正在思考”的加载状态。

坑3：POI搜索结果过多 不加限制可能返回几十个结果，前端渲染压力大。建议：

  • 限制返回数量（默认10个）
  • 实现聚类展示（距离较近的POI合并为一个标记点）

7.2 后续优化方向

  1. 多人实时协同：支持多人同时编辑行程，实时同步位置和计划
  2. 个性化推荐：根据用户历史偏好（常去的餐厅类型、喜欢的景点风格）优化推荐算法
  3. 离线能力：缓存常用地图数据，弱网环境下仍可查看
  4. 语音交互：接入语音识别，实现完全免手持的对话式规划

八、总结

本文从零开始，完整实现了一个AI智能行程助手，核心流程如下：

text

用户自然语言输入 
    ↓ 
大模型意图识别（MCP工具选择）
    ↓
调用腾讯位置服务API（POI搜索/路线规划/天气查询）
    ↓
结果整合与自然语言生成
    ↓
地图可视化展示（标记点/路线/信息窗口）

技术要点回顾：

  • MCP协议让大模型与地图服务的对接变得前所未有的简单
  • 腾讯位置服务提供了从基础地图到高级路线规划的完整能力矩阵
  • AI+地图的想象空间远不止行程规划——商业选址、物流优化、应急调度等都是可探索的方向

参赛感受： 这次腾讯位置服务开发者征文大赛提供了一个难得的实战机会。从选题到开发再到文档撰写，整个过程让我对“AI+地图”这个方向有了更深的理解。正如活动主题所说，地图正在从单纯的“工具”进化为能思考、会对话的“大脑”。

下一步计划：

  • 将项目完善为微信小程序版本（利用腾讯位置服务小程序SDK）
  • 接入更多MCP工具（天气、交通、酒店预订等）
  • 探索多人出行场景的更多玩法

如果你也对AI+地图感兴趣，欢迎一起交流讨论！

项目GitHub地址：评论区见 Demo演示视频：微信关注：第404号实验室

📌 参赛信息

  • 本文参与【腾讯位置服务开发者征文大赛——AI赋能 重塑地图智能新体验】
  • 活动时间：2026年3月30日 – 2026年5月20日
  • 报名方式：点击[腾讯位置服务开发者征文大赛报名表]填写信息
* AI润色输出，仅供参考

我们为您提供位置服务商业授权许可

合规地图省心之选，微信生态独家支持

办理咨询

相关推荐

腾讯位置服务C地图开发指南：从基础地图实例到行业解决方案

叮小灵 叮小灵

在GIS地理信息系统与LBS位置服务深度融合的今天，C开发者若想为Windows桌面应用企业级后台系

C#地图开发 2026-03-02

腾讯位置服务地图分析软件：从通视分析到商业智能决策

叮小灵 叮小灵

在智慧零售物流调度城市规划等场景中，精准的空间数据分析能力已成为企业降本增效的关键。腾讯位置服务的地

地图分析 2026-03-02

腾讯位置服务定位系统：高精度定位技术与全场景解决方案

叮小聪 叮小聪

在智慧出行零售选址物流调度等场景中，精准的定位系统是企业实现高效运营的基础能力。腾讯位置服务提供的定

高精定位 2026-03-03