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

文章目录前言一、问题背景1.1 传统地图方案的局限1.2 AI 地图的可能性二、技术方案四层架构一张情绪地图2.1 整体架构2.2 腾讯位置服务能力使用清单2.3 AI 接入方案三、项目实操3.1 下载 Skill3.2 创建 CodeBuddy 项目3.3 项目立项3.4 获取 API Key3.5 接入 AI 大模型3.6 Prompt 设计四、效果展示4.1 情绪热力地图4.2 AI 路线规划演示4.3 多出行方式路线规划4.4 一键导航4.5 路线分享五、总结前言你有没有想过这样一个问题为什么每次打开地图导航的终点永远是目的地而不是状态的出口我们每天被日历、打卡、通勤包围偶尔想出去走走却发现连去哪儿这件事本身都变成了决策成本。大众点评告诉你的是评分最高的餐厅小红书推给你的是网红打卡队腾讯地图帮你规划最快路线——但没有一款工具问过你你今天想要什么感觉本篇文章将手把手带领各位开发者利用腾讯位置服务及其配套 Skill从零到一开发一款反内卷散步助手网页应用。项目主要用到以下三个 Skill1. 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 GLJSAPIGL开发指南。适用于地图应用或工具的编写。在编写、审查或调试使用腾讯地图 API 的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、IP 定位、几何计算、三维模型展示、性能优化的任务。3. tmap-lbs-skills腾讯地图位置服务支持 POI 搜索、路径规划、旅游规划、周边搜索轨迹数据可视化和地图数据可视化。接下来笔者将一步一步带领各位开发者完成该项目项目最终效果如下【腾讯位置服务开发者征文大赛】用 AI 读懂城市情绪一、问题背景过去五年“反内卷”“松弛感”city walk这些词以惊人的速度成为年轻人的情绪出口。人们需要走出去但不是为了打卡不是为了效率而是为了喘息。然而现有地图产品的底层逻辑是效率优先最短路线、最快到达、评分最高的地点。这套逻辑在导航场景下无可替代但在我只是想出去走走这个需求上完全失效。用户真正想要的是人少一点、不挤、不焦虑有点烟火气但不是网红打卡安静的可以清空大脑的不需要提前攻略走走就好这是一个情绪维度的需求不是坐标维度的需求。1.1 传统地图方案的局限传统地图 推荐算法的链路是这样的用户输入目的地 → 规划路线 → 到达。即使是 POI 推荐也是基于评分、距离、热度的排序本质上是**“大众喜欢的”而不是此刻的我需要的**。更深层的问题是地图数据中根本没有情绪这个字段。一个公园是安静还是喧嚣取决于时段、人流、季节、天气。这些信息零散地藏在用户评论、人流数据、POI 类型里从未被系统性地提取和可视化。1.2 AI 地图的可能性大语言模型LLM的出现让自然语言理解变得廉价而强大。用户只需要说一句人少安静、适合发呆的30分钟路线AI 就能解析出情绪类型安静/治愈、时长约束30分钟、场景偏好低人流、慢节奏——然后调用地图能力完成路线的自动组装。腾讯位置服务提供了一整套从定位 → 检索 → 路线 → 渲染 → 导航的能力链正好是这个方案的技术底座。本文的核心目标就是在腾讯地图的坐标体系上叠加一个情绪坐标系。二、技术方案四层架构一张情绪地图整个系统是一个纯前端的单页应用SPA无需后端服务器所有能力通过浏览器直接调用腾讯位置服务 API 和 AI Chat Completions 接口实现。2.1 整体架构2.2 腾讯位置服务能力使用清单能力模块调用接口在本项目中的用途地图底图渲染JavaScript API GLv1.exp主地图容器支持 3D 倾斜视角数据可视化热力图TMap.visualization.Heat四种情绪层的热力渲染多标记点图层TMap.MultiMarker路线途经点 用户位置标记多折线图层TMap.MultiPolyline路线轨迹绘制带方向箭头信息弹窗TMap.InfoWindow点击标记展示 POI 详情地理边界自适应TMap.LatLngBoundsfitBounds路线生成后自动调整视野周边搜索/ws/place/v1/search获取真实 POI 驱动热力图POI 名称坐标反查步行路线规划/ws/direction/v1/walking步行模式真实路径折线骑行路线规划/ws/direction/v1/bicycling骑行模式真实路径折线驾车路线规划/ws/direction/v1/driving驾车模式真实路径折线公交路线规划/ws/direction/v1/transit公交模式真实路径折线导航调起URI APIrouteplan?typewalk/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访问 腾讯位置服务开发文档在「开发文档」栏目中找到「地图技能」如下图所示将列表中的三个 Skill 下载到本地并解压。每个 Skill 的详细能力说明可查看官网文档也可参考本文前言部分的介绍。3.2 创建 CodeBuddy 项目在 CodeBuddy 中创建项目并在对话框区域配置 Skill如下图所示3.3 项目立项配置好 Skill 之后即可通过自然语言交互驱动项目开发。以下是本项目使用的需求文档供参考## 一、方案总览### 1. 技术底座- 核心地图JavaScript API GL地图渲染、标记、折线、自定义图层 - 可视化数据可视化 JS API热力图/情绪图层 - 搜索服务地点检索、周边推荐、POI 详情 - 路线服务步行/骑行路线规划 - 定位服务H5 地图定位组件获取用户位置 - AI 协同MCP 协议 工具调用Agent 自动调度地图能力### 2. 核心创新- 不做常规导航/选址/文旅首创城市情绪可视化 - 自然语言对话生成松弛感/反内卷/治愈路线 - 实时情绪热力热闹/治愈/烟火/安静四态叠加### 3. 可交付物- 可运行 Web DemoHTML JS 腾讯地图 API - 演示视频20 秒流程 - 完整接口调用清单 ---## 二、功能模块### 模块 1城市情绪热力图层- 输入人流密度、停留时长、POI 类型、时段、路况 - AI 输出4种情绪色块 - 热闹焦虑商圈/网红/拥挤 - 松弛治愈公园/河边/人少 - 烟火市井菜市场/社区店/夜市 - 安静学习图书馆/自习室/步道 - 实现TMap.visualization.Heat 自定义渐变渲染### 模块 2自然语言意图解析Prompt 大模型支持一句话生成路线 -人少、安静、适合发呆的 30 分钟路线-本地人常去、不网红、有烟火气的街巷-下班放松推荐治愈散步路线AI 拆解位置 → 半径 → 过滤条件 → 排序 → 串联点位 → 规划路径### 模块 3智能氛围路线规划流程1. 用户定位 → 获取经纬度2. AI 筛选符合情绪的 POI3. 调用步行路线规划生成最优路径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 中引入该文档发起对话如下图所示从图中可以看到发送需求后CodeBuddy 会自动调用腾讯地图 Skill 完成代码编写。3.4 获取 API Key项目运行时可能出现鉴权失败的提示这是因为腾讯地图 API 需要合法的 Key 进行鉴权。申请步骤如下打开 腾讯位置服务控制台 → 登录 → 控制台 → 创建应用 → 添加 Key详细配置如下图所示获取到 Key 之后将其替换到代码中对应的变量位置即可正常运行。3.5 接入 AI 大模型访问 腾讯云模型广场 选择所需模型并申请使用。申请完成后选择 API 调用方式接入项目即可。项目中的接口调用效果如下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 稀疏区域也能正常渲染asyncfunctionloadHeatFromPOI(loc){asyncfunctionfetchEmotionPts(emotion,cfg,radius){constallPts[];awaitPromise.all(cfg.keywords.slice(0,2).map(asynckw{constresultsawaitsearchNearbyPOI(kw,loc.lat,loc.lng,radius,10);results.forEach(poi{if(poi.location)allPts.push({lat:poi.location.lat,lng:poi.location.lng,count:60Math.random()*40});});}));return{emotion,pts:allPts};}// 第一轮3000mlettasksObject.entries(EMOTION_CONFIG).map(([e,cfg])fetchEmotionPts(e,cfg,3000));letresultsawaitPromise.allSettled(tasks);lettotalPOIresults.reduce((s,r)s(r.statusfulfilled?r.value.pts.length:0),0);// fallbackPOI 为空时扩大至 8000m 重试if(totalPOI0){tasksObject.entries(EMOTION_CONFIG).map(([e,cfg])fetchEmotionPts(e,cfg,8000));resultsawaitPromise.allSettled(tasks);}results.forEach(res{if(res.statusfulfilled)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{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~15kmAI 推荐更大范围的地点后端调用/ws/direction/v1/bicycling返回适合骑行的真实路径折线路线在地图上以蓝绿色渲染。驾车模式同理调用/ws/direction/v1/driving。4.4 一键导航点击「打开腾讯地图导航」根据当前出行方式自动选择 URItype参数步行→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 地图融合应用场景的开发者提供有价值的思路与实践参考。