 
## 前言

你有没有想过这样一个问题：为什么每次打开地图，导航的终点永远是目的地，而不是状态的出口？

我们每天被日历、打卡、通勤包围，偶尔想出去走走，却发现连"去哪儿"这件事本身都变成了决策成本。大众点评告诉你的是评分最高的餐厅，小红书推给你的是网红打卡队，腾讯地图帮你规划最快路线——但没有一款工具问过你：**你今天，想要什么感觉？**

本篇文章将手把手带领各位开发者，利用腾讯位置服务及其配套 Skill，从零到一开发一款"反内卷散步助手"网页应用。项目主要用到以下三个 Skill：

**1. tencent-lbs-webservice**

> 腾讯位置服务 WebService API 开发技能。当开发者需要通过 HTTP 接口集成地理编码、地点搜索、路线规划、天气查询、IP 定位等位置服务时，此技能提供完整的 API 调用指导。适用场景：(1) 地址与坐标互转 (2) 地点搜索与周边 POI 查询 (3) 关键词输入提示与自动补全 (4) 沿途搜索 (5) 路线规划（驾车/步行/骑行/电动车/公交）(6) 距离矩阵与批量距离计算 (7) IP 定位 (8) 天气查询 (9) 智能地址解析 (10) 坐标系转换 (11) 行政区划查询。

**2. tmap-jsapi-gl**

> 腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或工具的编写。在编写、审查或调试使用腾讯地图 API 的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、IP 定位、几何计算、三维模型展示、性能优化的任务。

**3. tmap-lbs-skills**

> 腾讯地图位置服务，支持 POI 搜索、路径规划、旅游规划、周边搜索，轨迹数据可视化和地图数据可视化。

接下来，笔者将一步一步带领各位开发者完成该项目，项目最终效果如下：
 

 [![【腾讯位置服务开发者征文大赛】用 AI 读懂城市情绪](https://developer.qcloudimg.com/http-save/yehe-1258955/7262c773e98dbe2b769a65ecacdd5072.png)](https://www.bilibili.com/video/BV1fSQABTELp/?vd_source=55f40c5e7501827015bab0f19432d3e3)
 
 视频演示地址 ： https://www.bilibili.com/video/BV1fSQABTELp/?vd_source=55f40c5e7501827015bab0f19432d3e3

## 一、问题背景

过去五年，"反内卷""松弛感""city walk"这些词以惊人的速度成为年轻人的情绪出口。人们需要走出去，但不是为了打卡，不是为了效率，而是为了喘息。

然而现有地图产品的底层逻辑是**效率优先**：最短路线、最快到达、评分最高的地点。这套逻辑在导航场景下无可替代，但在"我只是想出去走走"这个需求上，完全失效。

用户真正想要的是：

- 人少一点、不挤、不焦虑
- 有点烟火气，但不是网红打卡
- 安静的，可以清空大脑的
- 不需要提前攻略，走走就好

**这是一个情绪维度的需求，不是坐标维度的需求。**

### 1.1 传统地图方案的局限

传统地图 + 推荐算法的链路是这样的：用户输入目的地 → 规划路线 → 到达。即使是 POI 推荐，也是基于评分、距离、热度的排序，本质上是**"大众喜欢的"**，而不是**"此刻的我需要的"**。

更深层的问题是：地图数据中根本没有"情绪"这个字段。一个公园是安静还是喧嚣，取决于时段、人流、季节、天气。这些信息零散地藏在用户评论、人流数据、POI 类型里，从未被系统性地提取和可视化。

### 1.2 AI + 地图的可能性

大语言模型（LLM）的出现，让自然语言理解变得廉价而强大。用户只需要说一句"人少安静、适合发呆的30分钟路线"，AI 就能解析出：情绪类型（安静/治愈）、时长约束（30分钟）、场景偏好（低人流、慢节奏）——然后调用地图能力完成路线的自动组装。

腾讯位置服务提供了一整套从**定位 → 检索 → 路线 → 渲染 → 导航**的能力链，正好是这个方案的技术底座。

**本文的核心目标，就是在腾讯地图的坐标体系上，叠加一个情绪坐标系。**

 

## 二、技术方案：四层架构，一张情绪地图

整个系统是一个纯前端的单页应用（SPA），无需后端服务器，所有能力通过浏览器直接调用腾讯位置服务 API 和 AI Chat Completions 接口实现。

### 2.1 整体架构

![整体流程图](https://developer.qcloudimg.com/http-save/yehe-1258955/2946d21dd5892ee6abb99a62b6920906.png)

### 2.2 腾讯位置服务能力使用清单

| 能力模块 | 调用接口 | 在本项目中的用途 |
|---|---|---|
| 地图底图渲染 | JavaScript API GL `v1.exp` | 主地图容器，支持 3D 倾斜视角 |
| 数据可视化热力图 | `TMap.visualization.Heat` | 四种情绪层的热力渲染 |
| 多标记点图层 | `TMap.MultiMarker` | 路线途经点 + 用户位置标记 |
| 多折线图层 | `TMap.MultiPolyline` | 路线轨迹绘制（带方向箭头）|
| 信息弹窗 | `TMap.InfoWindow` | 点击标记展示 POI 详情 |
| 地理边界自适应 | `TMap.LatLngBounds` + `fitBounds` | 路线生成后自动调整视野 |
| 周边搜索 | `/ws/place/v1/search` | 获取真实 POI 驱动热力图；POI 名称坐标反查 |
| 步行路线规划 | `/ws/direction/v1/walking` | 步行模式真实路径折线 |
| 骑行路线规划 | `/ws/direction/v1/bicycling` | 骑行模式真实路径折线 |
| 驾车路线规划 | `/ws/direction/v1/driving` | 驾车模式真实路径折线 |
| 公交路线规划 | `/ws/direction/v1/transit` | 公交模式真实路径折线 |
| 导航调起 | URI API `routeplan?type=walk/bike/drive/transit` | 一键唤起腾讯地图 App 导航 |
| 地理定位 | `navigator.geolocation` | 获取用户当前经纬度 |

### 2.3 AI 接入方案

AI 模块采用 **OpenAI Chat Completions 协议**，天然兼容 DeepSeek、腾讯混元等国产大模型，无需引入任何 SDK，直接用浏览器原生 `fetch` 调用：

```
DeepSeek API：   https://api.deepseek.com/chat/completions
腾讯混元 API：   https://tokenhub.tencentmaas.com/v1/chat/completions
```

系统内置**双模式降级机制**：有 API Key 时调用真实 AI；无 Key 时自动切换腾讯 WebService 周边搜索关键词引擎，确保功能完整可用。

---

## 三、项目实操

本章重点讲解如何将相关 Skill 接入 CodeBuddy，并通过自然语言指令驱动代码生成，完成整个项目的开发。

### 3.1 下载 Skill

访问 [腾讯位置服务开发文档](https://lbs.qq.com/webApi/Skills/Map-Skills/overview)，在「开发文档」栏目中找到「地图技能」，如下图所示：

![Skill 列表](https://developer.qcloudimg.com/http-save/yehe-1258955/d11c1bd12faa85ad766adaef216981ef.png)

将列表中的三个 Skill 下载到本地并解压。每个 Skill 的详细能力说明可查看官网文档，也可参考本文前言部分的介绍。

### 3.2 创建 CodeBuddy 项目

在 CodeBuddy 中创建项目，并在对话框区域配置 Skill，如下图所示：

![配置 Skill](https://developer.qcloudimg.com/http-save/yehe-1258955/566821b876612417509e4385662f1647.png)

### 3.3 项目立项

配置好 Skill 之后，即可通过自然语言交互驱动项目开发。以下是本项目使用的需求文档，供参考：

```bash
## 一、方案总览

### 1. 技术底座
- 核心地图：JavaScript API GL（地图渲染、标记、折线、自定义图层）
- 可视化：数据可视化 JS API（热力图/情绪图层）
- 搜索服务：地点检索、周边推荐、POI 详情
- 路线服务：步行/骑行路线规划
- 定位服务：H5 地图定位组件（获取用户位置）
- AI 协同：MCP 协议 + 工具调用，Agent 自动调度地图能力

### 2. 核心创新
- 不做常规导航/选址/文旅，首创城市情绪可视化
- 自然语言对话生成松弛感/反内卷/治愈路线
- 实时情绪热力：热闹/治愈/烟火/安静四态叠加

### 3. 可交付物
- 可运行 Web Demo（HTML + JS + 腾讯地图 API）
- 演示视频（20 秒流程）
- 完整接口调用清单

---

## 二、功能模块

### 模块 1：城市情绪热力图层
- 输入：人流密度、停留时长、POI 类型、时段、路况
- AI 输出 4 种情绪色块：
  - 热闹焦虑（商圈/网红/拥挤）
  - 松弛治愈（公园/河边/人少）
  - 烟火市井（菜市场/社区店/夜市）
  - 安静学习（图书馆/自习室/步道）
- 实现：TMap.visualization.Heat 自定义渐变渲染

### 模块 2：自然语言意图解析（Prompt + 大模型）
支持一句话生成路线：
- "人少、安静、适合发呆的 30 分钟路线"
- "本地人常去、不网红、有烟火气的街巷"
- "下班放松，推荐治愈散步路线"
AI 拆解：位置 → 半径 → 过滤条件 → 排序 → 串联点位 → 规划路径

### 模块 3：智能氛围路线规划
流程：
1. 用户定位 → 获取经纬度
2. AI 筛选符合情绪的 POI
3. 调用步行路线规划生成最优路径
4. 地图绘制轨迹 + 标记点位
5. 输出：路线描述、时长、距离、氛围标签

### 模块 4：一键导航与分享
- 调用 URI API 调起腾讯地图导航
- 生成分享卡片：路线截图 + 情绪文案 + 位置链接

---

## 三、接口清单

| 能力 | 官方接口 | 用途 |
|---|---|---|
| 地图初始化 | JavaScript API GL | 底图、控件、3D 楼块 |
| 用户定位 | H5 地图定位组件 | 获取当前经纬度 |
| 周边搜索 | /ws/place/v1/search | 按类型/筛选检索 POI |
| 步行路线 | /ws/direction/v1/walking | 生成散步路径 |
| 热力渲染 | TMap.visualization.Heat | 情绪热力图 |
| 导航调起 | URI API | 一键跳转导航 |
| MCP 工具调用 | placeSearchNearby/direction | Agent 自动调度 |
```

将上述需求文档保存为 `md` 文件，在 CodeBuddy 中引入该文档发起对话，如下图所示：

![需求文档引入](https://developer.qcloudimg.com/http-save/yehe-1258955/38967bf0f61e3779bd233a15466958c1.png)

从图中可以看到，发送需求后，CodeBuddy 会自动调用腾讯地图 Skill 完成代码编写。

### 3.4 获取 API Key

项目运行时可能出现鉴权失败的提示：

![鉴权失败](https://developer.qcloudimg.com/http-save/yehe-1258955/d43f86938618914a546da46f89db6ac2.png)

这是因为腾讯地图 API 需要合法的 Key 进行鉴权。申请步骤如下：

打开 [腾讯位置服务控制台](https://lbs.qq.com/) → 登录 → 控制台 → 创建应用 → 添加 Key，详细配置如下图所示：

![配置 Key](https://developer.qcloudimg.com/http-save/yehe-1258955/ef3c3f243c057f0a20538609387fd86f.png)

获取到 Key 之后，将其替换到代码中对应的变量位置即可正常运行。

### 3.5 接入 AI 大模型

访问 [腾讯云模型广场](https://console.cloud.tencent.com/tokenhub/models) 选择所需模型并申请使用。申请完成后，选择 API 调用方式接入项目即可。

![模型广场](https://developer.qcloudimg.com/http-save/yehe-1258955/5af231872b8302cec81d9eb335bfbe89.png)

项目中的接口调用效果如下：

![接口调用效果](https://developer.qcloudimg.com/http-save/yehe-1258955/f7df2a8a928ad843594c58439cabca59.png)

### 3.6 Prompt 设计

接入大模型后，需要定义一个 Prompt，告知模型期望的输出格式与内容规范。本项目使用的 Prompt 示例如下：

```
你是一个城市情绪路线规划助手。用户描述了想要的路线，请帮我解析并规划。

用户描述："${userPrompt}"
用户当前位置：纬度 ${location.lat.toFixed(4)}，经度 ${location.lng.toFixed(4)}
出行方式：${modeDesc[travelMode] || modeDesc.walking}

请严格按如下 JSON 格式输出，不要有任何额外文字：
{
  "emotion": "heal|folk|quiet|hot 中的一个",
  "emotionName": "情绪中文名（如：松弛治愈）",
  "tags": ["标签1","标签2","标签3"],
  "duration": 预计时长分钟数（数字，根据出行方式和距离估算）,
  "desc": "50字以内的路线氛围描述",
  "pois": [
    { "name": "地点名称（真实存在）", "addr": "简短地址", "reason": "选择理由", "lat": 纬度数字, "lng": 经度数字 },
    ...（3~4个地点，根据出行方式选择合适距离的地点）
  ]
}

情绪分类规则：
- heal：公园、绿道、河边、人少安静
- folk：菜市场、胡同、夜市、社区街巷
- quiet：图书馆、步道、自习室、清晨
- hot：商圈、网红打卡、活力繁华

重要：pois 中的地点必须是用户位置 ${rangeKm[travelMode] || '5'}km 范围内真实存在的地点，每个 poi 必须包含 lat 和 lng 坐标字段。
```

## 四、效果展示
 ### 4.1 情绪热力地图

用户定位后，系统自动调用腾讯 WebService 周边搜索，按四种情绪分类的关键词（公园/菜市场/图书馆/商圈等）并发获取周边真实 POI，将坐标注入对应热力图层。地图上叠加四层情绪热力图：红色（热闹焦虑）、绿色（松弛治愈）、黄色（烟火市井）、蓝色（安静学习）。每层均可独立开关，时段滑块从 0:00 到 23:00 实时调整热力强度。

**无需配置 AI Key**，热力图即可正常工作——系统直接使用腾讯位置服务 `/ws/place/v1/search` 获取 POI 数据，与 AI 模块完全解耦。`loadHeatFromPOI` 采用双轮搜索策略：第一轮半径 3000m，若返回为空自动扩大至 8000m 重试，确保在城郊等 POI 稀疏区域也能正常渲染：

```javascript
async function loadHeatFromPOI(loc) {
    async function fetchEmotionPts(emotion, cfg, radius) {
        const allPts = [];
        await Promise.all(cfg.keywords.slice(0, 2).map(async kw => {
            const results = await searchNearbyPOI(kw, loc.lat, loc.lng, radius, 10);
            results.forEach(poi => {
                if (poi.location)
                    allPts.push({ lat: poi.location.lat, lng: poi.location.lng, count: 60 + Math.random() * 40 });
            });
        }));
        return { emotion, pts: allPts };
    }

    // 第一轮：3000m
    let tasks = Object.entries(EMOTION_CONFIG).map(([e, cfg]) => fetchEmotionPts(e, cfg, 3000));
    let results = await Promise.allSettled(tasks);
    let totalPOI = results.reduce((s, r) => s + (r.status === 'fulfilled' ? r.value.pts.length : 0), 0);

    // fallback：POI 为空时扩大至 8000m 重试
    if (totalPOI === 0) {
        tasks = Object.entries(EMOTION_CONFIG).map(([e, cfg]) => fetchEmotionPts(e, cfg, 8000));
        results = await Promise.allSettled(tasks);
    }

    results.forEach(res => {
        if (res.status === 'fulfilled')
            heatLayers[res.value.emotion]?.setData(res.value.pts);
    });
}
```

用户位置标记采用 48px 双层圆形 SVG 图标（外圈半透明光晕 + 主圆 + 中心白点），并通过 `TMap.DOMOverlay` 叠加 CSS 脉冲扩散动画，在热力图背景下也能清晰识别。

拖动时段滑块到 **18:00** 时，黄色烟火层和绿色治愈层显著增强；调到 **09:00** 时，蓝色安静层和绿色治愈层主导——还原了城市不同时间段的真实情绪节奏。

### 4.2 AI 路线规划演示

**输入：** "下班了，很累，想要一条人少安静、不用动脑子的30分钟散步路线"

**AI 解析输出（DeepSeek deepseek-chat）：**

```json
{
  "emotion": "quiet",
  "emotionName": "安静独处",
  "tags": ["🔕 低噪", "🌅 黄昏感", "🚶 慢行"],
  "duration": 30,
  "desc": "沿北海公园步道漫步，黄昏的光打在湖面上，不需要想任何事。",
  "pois": [
    { "name": "北海公园北门", "addr": "文津街1号", "lat": 39.9270, "lng": 116.3820 },
    { "name": "北海公园步道", "addr": "公园内环湖路", "lat": 39.9250, "lng": 116.3843 },
    { "name": "景山公园东门", "addr": "景山东街", "lat": 39.9248, "lng": 116.3940 }
  ]
}
```

系统随即调用腾讯 WebService 以地点名称反查精确坐标，再并发请求 `/ws/direction/v1/walking` 获取各段真实步行路径折线，地图上渲染出带方向箭头的蓝色路线轨迹，每个途经点标注蓝色自定义圆形图标，点击可弹出详细信息。路线摘要显示：约 **2.3 km · 29 分钟 · 3 个点位**。

### 4.3 多出行方式路线规划

切换为「骑行」模式后，Prompt 约束变为"POI 间距 2~5km，总路线 5~15km"，AI 推荐更大范围的地点；后端调用 `/ws/direction/v1/bicycling` 返回适合骑行的真实路径折线，路线在地图上以蓝绿色渲染。驾车模式同理调用 `/ws/direction/v1/driving`。

### 4.4 一键导航

点击「打开腾讯地图导航」，根据当前出行方式自动选择 URI `type` 参数（步行→`walk`，骑行→`bike`，驾车→`drive`，公交→`transit`），跳转至腾讯地图对应路线规划页，起点为用户当前定位，终点为路线最后一个 POI。

### 4.5 路线分享

生成路线后可复制路线文案，格式如下：

```
【BodyAtlas · 安静独处路线】
沿北海公园步道漫步，黄昏的光打在湖面上，不需要想任何事。

🕐 约29分钟 · 📏2.3km
1. 北海公园北门
2. 北海公园步道
3. 景山公园东门

🗺 通过 BodyAtlas 生成
```

> **运行 Demo** 在项目根目录执行 `python3 -m http.server 8888`，访问 `http://localhost:8888` 即可运行完整功能（需配置腾讯地图 API Key 和  不同模型的API Key）。


## 五、总结

本文从需求分析到功能落地，完整记录了一次 AI 与地图能力深度融合的实践过程。通过接入腾讯位置服务的定位、POI 搜索、路线规划、热力渲染与 URI 导航等核心能力，结合大语言模型的自然语言理解，我们在纯前端环境中构建出一款具备情绪感知维度的城市漫步助手。整个开发过程也充分验证了 CodeBuddy Skill 体系在 LBS 场景下的高效协同价值——从 API 调用规范到组件复用，极大缩短了开发周期。希望本文能为同样探索 AI + 地图融合应用场景的开发者提供有价值的思路与实践参考。

 

你有没有想过这样一个问题：为什么每次打开地图，导航的终点永远是目的地，而不是状态的出口？

【腾讯位置服务开发者征文大赛】用 AI 读懂城市情绪 —— 基于腾讯位置服务的反内卷散步助手

宣传大使

人工智能

开发"反内卷散步助手"网页应用，利用腾讯位置服务API实现情绪化路线规划。整合AI自然语言理解与地图功能，支持四种情绪热力图渲染、智能路线生成及一键导航，帮助用户找到治愈、烟火、安静或热闹的个性化散步路线。

数据可视化

服务器

流数据

容器

Agent

JSON

2026采购季 | AI焕新·智启新局

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【腾讯位置服务开发者征文大赛】用 AI 读懂城市情绪 —— 基于腾讯位置服务的反内卷散步助手-腾讯云开发者社区-腾讯云

【腾讯位置服务开发者征文大赛】用 AI 读懂城市情绪 —— 基于腾讯位置服务的反内卷散步助手

【腾讯位置服务开发者征文大赛】用 AI 读懂城市情绪 —— 基于腾讯位置服务的反内卷散步助手

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐