作者: csdn565973850 发布时间: 于 2026-04-21 14:45:11 发布
来源: https://blog.csdn.net/csdn565973850/article/details/160361607
现在有这样一个需求,春天来了,A、B、C、、、几个人是好朋友,他们住在不同的地方,想着周末没事的时候,一起约着去赏花。于是他们就想,我们可以先定一个地点集合,集合完毕之后,我们再看想去哪儿玩儿,来个春日一日游。那么问题来了,这几个好朋友应该去哪儿集合才能让大家都更省时间,快速到达集合点呢?到了集合点了,路线怎么规划,才能把想去的地儿都去了呢?
今天我们想要做的事就是首先给这几位好朋友推荐一个集合点,然后到了集合点之后,再根据商定出来的去玩儿的景点规划一个出行路线,从而可以让每个人都玩儿的开心。需求确定了,下面我们就开始来做吧!
为了完成上面这个春游需求,我们需要一个开发工具—WorkBuddy,这里我先简单介绍一下WorkBuddy ,具体的安装步骤这里就不说了,之前的文章里面也有,有需要的小伙伴可以参考我之前的文章即可。
WorkBuddy 是腾讯推出的全场景职场 AI 智能体桌面工作台。你只需用一句话描述需求,WorkBuddy 便能像你的专职助理一样自主规划和执行复杂任务,并交付可验收的结果。
与传统的 AI 对话不同,WorkBuddy 不仅能"听懂人话",还能"带脑子思考"并"实际操作本地文件",真正帮您干活。
如果还是不太清楚WorkBuddy 的功能,我们通过 WorkBuddy 适用场景来看看WorkBuddy 到底可以做什么?WorkBuddy 适用场景:
在我们对WorkBuddy 的适用场景有了一个大概的了解之后,你是不是很想试试是不是真的如此呢?如果没有安装WorkBuddy 的小伙伴可以去WorkBuddy 官网: https://www.codebuddy.cn/work/ 下载并安装WorkBuddy

安装完成之后,我们还需要安装一个腾讯地图skill 来帮助我们实现我们的春游需求。
说起来skill,那么什么是skill?
skill简单理解就是技能,比如说你是画家,你会画画,这就是你的技能。那么skill是给AI Agent用的技能,AI助手能够借助Skill学习新技能,WorkBuddy也可以通过安装不同的Skill获得特定领域的专业能力,在对话中自动识别用户意图并调用对应的Skill来完成任务。腾讯地图skills 官网地址:https://lbs.qq.com/
腾讯地图目前提供了两个核心 Skill
这里我们的春游需求想要做成网页的形式,那么我们就可以选择第一个skill ,TencentMap_jsapi_skills,那么也简单介绍一下这个 TencentMap_jsapi_skills 技能。
腾讯地图 JSAPI GL Skill 是一套专为 AI IDE 设计的 AI 编程技能包。它将腾讯地图 JavaScript API GL 的官方文档、最佳实践和代码模板整合为结构化的技能文件,使 Cursor、Claude、CodeBuddy 的 AI Coding 工具能够:
无论你是地图开发小白还是老手,这个skill 都能帮助我们显著提升开发效率。
我们想要实现我们的春游需求,那么有一个前端页面可以在上面选择小伙伴获取集合点,再根据景点获取出现规划,自然是很方便的。那么这里我们就要给我们的WorkBuddy 安装 TencentMap_jsapi_skills(前端地图开发) 技能。打开WorkBuddy ,选择【技能】,在搜索框中输入【tencentmap-jsapi-gl-skill】搜索我们想要安装的腾讯地图skill

点击 tencentmap-jsapi-gl-skill 技能右侧的 【+】按钮安装技能,安装完成后技能默认是启用状态

到这里,我们的准备操作就全部完成了,下面我们就可以来着手做我们的春游规划需求了。
从我们前面的需求中,我们大概可以梳理出这个需求的关键点,这是一个多参与者、多出行方式的出行规划,这个出行规划包括汇合点推荐、一日游方案与时间安排等,那么这里我们可能还是不太知道这个提示词应该怎么写。此时,我们就可以让我们的WorkBuddy 帮我们写提示词。这里我看到官方文档里面有类似的prompt 示例,参考一下

那么整合我们的需求以及这个prompt 的示例,我们就得到了我们的提示词
我想基于腾讯地图 JSAPI GL 做一个多人出行规划工具的完整 HTML 页面,需要实现多参与者、多出行方式的出行规划(汇合点推荐、一日游方案与时间安排)帮我生成提示词
这时我们可以看到WorkBuddy 自动调用我们安装的腾讯地图skill tencentmap-jsapi-gl-skill,并检测了环境变量是否设置了API Key,同时给出了正式Key 的设置地址,以及使用预体验Key 的一些限制

这里我们继续向下看,可以看到我们的需求是【生成提示词】,那么WorkBuddy 就帮助我们生成了一份【多人出行规划工具 — 腾讯地图 JSAPI GL 完整提示词】

提示词完整内容如下,这里我们可以看到WorkBuddy 为我们生成的春游规划提示词还是很详尽的,不但涵盖和细化了我们的需求点,同时约定了数据状态管理,视觉设计要求,错误处理,技术约束等内容,很详尽
请基于腾讯地图 JavaScript API GL(TMap JSAPI GL)开发一个「多人出行规划工具」的单文件 HTML 页面,具备以下完整功能:
---
### 一、基础环境
- 使用腾讯地图 JSAPI GL,API 加载地址:
https://map.qq.com/api/gljs?v=3.exp&key=YOUR_KEY&libraries=service,geometry
- 页面为单文件 HTML,所有 CSS / JS 内联,无外部依赖(除地图 SDK)
- 地图默认中心设为北京(39.9042, 116.4074),zoom=11
- 响应式布局,左侧为控制面板(宽 380px),右侧为全屏地图
---
### 二、参与者管理
- 支持添加 2~8 名参与者,每人需填写:
- 姓名(昵称)
- 出发地点(支持手动输入 + 地点搜索自动补全,使用 TMap.service.Suggestion)
- 出行偏好(优先出行方式):驾车 / 公交 / 步行 / 骑行
- 参与者列表可动态增减,颜色标识(每人分配不同颜色)
- 每个出发点在地图上显示对应颜色的 Marker,弹窗显示姓名和出发地
---
### 三、汇合点推荐
- 点击「推荐汇合点」按钮后执行以下逻辑:
1. 计算所有出发点的地理中心(经纬度均值)
2. 以地理中心为原点,使用 TMap.service.Search 搜索附近商圈/交通枢纽/广场(关键词:公交站、地铁站、广场、购物中心)
3. 对搜索结果按「到所有参与者的总交通时间」估算综合评分(权重:总时间 + 距离均衡性)
4. 展示 Top 3 推荐汇合点,在地图上用特殊 Marker(星形或不同图标)标注
5. 用户可从 3 个候选中选择一个作为最终汇合点
6. 确认后绘制每位参与者到汇合点的路线(按各自偏好的出行方式)
---
### 四、路线规划与绘制
- 路线规划使用对应服务:
- 驾车:TMap.service.Driving
- 公交/地铁:TMap.service.Transit
- 步行:TMap.service.Walking
- 骑行:TMap.service.Bicycling
- 每位参与者的路线用其对应颜色的折线绘制在地图上(TMap.MultiPolyline)
- 路线信息展示:预计时间、距离、途经主干道
- 路线绘制完成后自动调整地图视野(fitBounds)包含所有路线
---
### 五、一日游方案生成
- 用户确认汇合点后,可进入「一日游规划」模块:
1. 用户输入游玩偏好标签(如:美食、文化、购物、自然风景、亲子),可多选
2. 以汇合点为中心,按选择的标签分类搜索周边景点/餐厅(使用 TMap.service.Search)
3. 自动生成一日游行程,包含:
- 上午游览地点(1~2 个)
- 午餐推荐(1 个)
- 下午游览地点(1~2 个)
- 晚餐推荐(1 个,可选)
4. 每个地点在地图上标注,并按顺序用折线连接(步行路线)
5. 行程时间轴展示:
- 09:00 集合于汇合点
- 每段行程注明预计出发时间、到达时间、游玩时长
- 支持用户拖拽调整行程顺序
---
### 六、地图交互与 UI
- 地图覆盖物层次:
- 底层:行程路线折线(MultiPolyline,各人颜色区分)
- 中层:景点/地点 Marker(MultiMarker,带序号标注)
- 顶层:出发点 Marker + 汇合点特殊 Marker
- 点击任意 Marker 弹出 InfoWindow,显示:
- 地点名称、地址
- 如是行程地点:显示计划抵达/离开时间、推荐游玩时长
- 如是出发点:显示参与者姓名和预计出发时间
- 左侧面板分 Tab 展示:「参与者」「推荐汇合点」「一日游行程」
- 面板可折叠,方便查看地图
---
### 七、数据与状态管理
- 所有状态用 JavaScript 对象管理(participants 数组、selectedMeeting 对象、itinerary 数组)
- 支持「导出行程」:将完整行程(参与者出发信息 + 路线 + 景点列表 + 时间安排)复制到剪贴板(JSON 格式)
- 支持「重置」:清空所有覆盖物和状态,重新规划
---
### 八、视觉设计要求
- 整体风格:现代简洁,主色调为蓝色系(#1677FF),辅以白色卡片
- 参与者颜色方案:['#FF6B6B','#4ECDC4','#45B7D1','#96CEB4','#FFEAA7','#DDA0DD','#98D8C8','#F7DC6F']
- 按钮有 hover/active 动效
- 加载状态展示(路线规划、地点搜索时显示 loading 提示)
- 移动端友好(控制面板在小屏幕下变为底部抽屉)
---
### 九、错误处理
- 地点输入为空时提示用户
- 路线规划失败时展示具体错误(无路线/超出范围)
- API 调用限流时给出友好提示,建议稍后重试
---
### 技术约束
- 所有 TMap 类调用必须严格使用官方文档接口,不得自行编造 API
- 参数格式遵循官方文档(如坐标必须用 new TMap.LatLng(lat, lng))
- 将代码中所有 YOUR_KEY 替换为实际 Key 的占位符,便于用户替换
- 代码结构清晰,关键步骤添加中文注释
在上面生成提示词的对话的结束,WorkBuddy 还给出了后续的操作建议,那么我们可以根据这个建议来继续下面的操作,整理后再次输入提示词
使用体验Key,城市偏好默认北京,根据上面提示词实现这个多人出行规划工具的html页面

点击【发送】之后,我们就可以喝茶等着WorkBuddy 来帮我们实现这个多人出行的春游规划HTML页面工具了,等待我们的春游规划HTMlL页面生成成功之后,我们可以在我们本地文件夹下找到这个html 文件

到这里,我们的出游规划HTML 页面工具功能就算完工了,是不是很简单,只要你有想法,那么你就可以通过WorkBuddy 来将你的想法落地,妥妥的理想照进现实的感觉!
我们的出游规划HTML 生成成功了,那么你会不会好奇到底是不是真的好用呢?这个时候我们就可以在本地浏览器打开我们的html 页面,然后【添加参与者】,这里我们添加了三个参与者,并依次输入他们的出行方式和当前所处的地点。这里需要注意的是,请求本地页面的方式可以通过windows shell 命令使用node.js 启动本地服务访问,file 的访问方式有些接口请求会不能适配。这个时候我们就可以让WorkBuddy 帮我们本地部署

然后在打开的Windows shell 命令窗口通过本地命令启动
请求后的访问地址示例 http://localhost:3000/

这个时候想要获取这两个地点的汇合点,点击【推荐汇合点】,却一直提示如下

那么回到我们的WorkBuddy,输入我们遇到的问题并让 WorkBuddy 帮助我们修复
添加了三个参与者,点击 推荐汇合点 ,但是一直提示未找到合适的汇合点,请尝试调整出发点 ,请修复
等待修复完成,这个修复的过程还是很快的

修复完成后,我们刷新本地浏览器页面,再次输入测试的参与者位置后,点击【推荐汇合点】这时我们可以看到我们的出游规划HTML工具 为我们生成了三个汇合点

这里我们选择第一个汇合点【国贸】然后点击【确认汇合点】,此时会跳转到 一日游界面

这里我们看到并没有绘制出每个参与者到汇合点的路线,一日游方案也没有去哪儿游玩的路线规划,那么基于此,我们可以让我们的WorkBuddy 继续修复
目前看到并没有绘制出每个参与者到汇合点的路线,一日游方案也没有去哪儿游玩的路线规划,请修复
再次修复完成之后,我们看到还是没有我们想要的出行规划路线,为了更快的解决问题,我们打开 F12 工具,可以看到我们的请求在获取出行规划路线时有报错

此时我们就可以将上面的错误信息复制粘贴给WorkBuddy 让他来自动修复
路线规划失败 for A: encoded.charCodeAt is not a function
这个问题修复完成后,又出现了这样的问题
路线规划失败 for A: 参数错误:LatLng 传入参数 (NaN, NaN) 非合法数字。
并且多次修复没效果,那么个人猜测可能是因为体验Key 的限制或者说是不稳定的原因,那么这里我们来配置一下正式key,在对话框中输入
配置正式Key
我们会获取到腾讯地图正式Key 的获取方式

按照上面的步骤,我们访问腾讯位置服务官网,选择微信扫码登录帐号,点击【控制台】进入控制台首页,选择【我的应用】-【创建应用】,输入应用名称,按照如图勾选后点击【保存】

回到应用列表页面,复制 Key 的值到 WorkBuddy 替换为正式 Key

回到WorkBuddy 对话框输入以下内容让WorkBuddy 帮助我们直接替换为正式Key

随后再次刷新html 页面测试效果,这里还是会遇到上面的报错信息
参数错误:LatLng 传入参数 (NaN, NaN) 非合法数字。
并且尝试修复了多轮还是没有解决,感觉有点像是AI 蒙了。这个时候我就尝试了重新-新建任务,打开新的任务窗口,选择我们的skill 和 html 页面并复制问题提示信息,进行问题修复,这次总算是把这个问题修复了

经过多轮次的问题修复,修复之后我们可以看到我们的路线图出来了

选择一个汇合点之后,确认汇合点回到行程规划页面,这里我们输入 【玉渊潭】 但是并没有搜索到玉渊潭公园的坐标,点击【规划行程】 就出现了如下提示

我们继续回到WorkBuddy 来对这个问题进行修复,为了保证是按照腾讯地图skill 修复,在问题结尾可以增加如下提示
行程规划里面的 POI 搜索 没有生效,仔细阅读技能中的api
修复完成之后,这里我们看到给我们推荐的汇合点看起来不像是两个地点的中间位置,或者说两个地点到汇合点的时间应该是哈不多的,目前看很明显不是这样的,这个时候我们就可以修复一下这个汇合点的算法
为什么汇合点一直是这几个,应该选择参与者到达目的地时间差不多的最优汇合点,仔细阅读技能中的api
修复完成后我们再来看一下汇合点,这下效果就好多了

这里在 行程规划 页面,搜索的从汇合点到 玉渊潭公园 的路线图,出现了切换出行方式,但是路线图只增加而不重置的情况,就是说,切换出行方式,会有新的路线规划出来,但是老的出行方式的路线规划也没消失,此时我们就可以输入以下内容修复
切换出行方式,获得的出行规划路线没有变化,请修复

等到所有的问题都修复成功之后,这个时候我们看是给出了线路规划,但是没有具体的线路方案,那么我们就可以继续完善我们的出游规划工具
为每一种出行方式都增加详细方案的展示
这样我们就可以获取不同的出行方式的出行规划路线详细方案了,就像下面这样

那么这里为了可以更好的看到效果,我这里录制一个视频,来看一下效果,录制的时候我会把F12 打开,可以看到具体控制台的请求返回参数,对于请求台红色的提示,我问过WorkBuddy ,WorkBuddy 给出的建议是不用处理即可,
📹 嵌入式视频: https://live.csdn.net/v/embed/522708
春游出行路线规划工具 演示
到这里,我们的春游出行规划工具就完工了,下面我们可以上传我们的代码到cnb.tool 上面去,在线管理代码,方便。
这里我们想要将我们的HTML 页面代码上传到我们的cnb.tool 仓库中,这时我们同样可以通过WorkBuddy 来实现轻松上传代码的操作。这里我们先来安装一下cnb 的skill。
在WorkBuddy 技能页面搜索 【cnb】,点击后面的【+】安装cnb.tool 技能skill

技能安装完成后,回到我们的对话框,选择cnb 技能,输入下面内容让WorkBuddy 帮助我们上传代码到cnb 仓库

这里我们看到WorkBuddy 给到我们cnb 返回状态,401 未登录,同时给出了cnb 账号登录方式。其中,在 WorkBuddy 左侧菜单栏我没看到登录 cnb 账号的入口,那么我们就采用获取CNB Token 然后配置 Token 的方式来登录cnb 账号

访问cnb 官网地址,选择微信快捷登录 cnb 账号

登录cnb 账号成功后,点击右上角账号头像,选择【个人设置】

在个人信息设置页面,选择【访问令牌】-【添加访问令牌】输入令牌名,选择到期时间,资源范围,常见场景,授权范围等信息,不想改动的直接默认即可,

这里需要注意的是因为我们姚使用skill 来自动操作我们的cnb 仓库,那么我们这里就需要勾选常见场景的【Skills 读写凭据】

令牌信息都确认完成之后,选择底部【创建】按钮,在弹出的令牌添加成功页面选择【一键复制】复制并保存cnb 的 Token,这个Token 需要保存好,弹窗一旦关闭,后面就看不到明文的Token 了。这里保存在合适位置也是为了后面需要用的时候可以直接用

获取Token 之后,我们回到WorkBuddy 对话框,选择cnb 技能skill ,然后让WorkBuddy 使用 Token 登录cnb 并创建仓库上传代码

等待WorkBuddy 会自动根据我们的Token 令牌登录 cnb 我的账号,然后创建仓库上传代码,上传完成后看到这样的结果

回到cnb 官网个人代码仓库列表页面,可以看到我们的多人出行智能规划已经上传成功了

点击仓库进入详情页面,看到目前还没有 README.md 那么为了可以让大家更好的理解这个项目是用来做什么的,我们可以让WorkBuddy 帮助我们直接在cnb 仓库下面来一份 README.md。在WorkBuddy 中输入以下内容

到这里,我们整个的工作算圆满完成了,代码已经上传,README 已经补充完成,更多详细信息大家可以去我的代码仓库查看README 内容, 代码仓库地址:https://cnb.cool/LYDY-2025/trip-planner

在上面的行程规划方案中,出行方式是 公交 时,可以看到只是显示了乘坐什么公共交通工具,但是公共交通工具换成路线,两头的步行路线都没有,这个时候我们就可以让 WorkBuddy 帮助我们完善公共交通衔接出的步行方案
tencentmap-jsapi-gl-skill 公交出行方案增加步行路线,让整个公交路线规划更连贯
等待WorkBuddy 处理完成后我们可以看到我们的公交路线两头以及中间换乘部分都增加了步行路线方案,这样整个公交路线看起来就更加完整,而不是断断续续的

这里我们发现一个问题,切换出行方式的时候,上一次出行方式的路线又忘记消除了,那么我们可以让WorkBuddy 帮助我们消除
tencentmap-jsapi-gl-skill 切换出行方式时上次的出行方式路线还在,请修复
等待修复完成之后,再次测试,发现切换出行方式时地图路线规划已经可以自动消除前一种出行方式的路线图了

这个时候我们想试试当添加多个POI 点时,还能不能合理的规划出行路线,这个时候我们发现规划的路线不是太好,那么我们就可以继续提出我们的优化方案
tencentmap-jsapi-gl-skill 当行程规划添加多个POI点时,切换不同出行方式时,需要展示汇合点依次到每一个POI点的最优出行方案
修复完成后的效果我们可以看到如下图效果

到这里,整体上觉得我们的多人出行规划方案可以了,功能基本全面,那么此时就可以更新代码到cnb 仓库
cnb.cool 更新代码到cnb 的仓库 trip-planner
代码推送完成后,我们回到cnb 我们的仓库刷新页面,可以看到已经是最新版的代码了

到这里,本次春游出行规划工具开发及测试完成,工作结束,圆满落幕。大家有感兴趣的可以直接去我的cnb 仓库下载源码本地运行即可,如果运行失败的话,大家就需要获取腾讯地图skill 需要的正式Key 后,让WorkBuddy 替换为你自己的Key 就可以使用了。
过往我们想要接入腾讯地图功能,那么我们首先需要阅读腾讯地图提供的API 文档,然后根据API 文档提供的demo 来在我们的业务场景中进行调用,调用完成之后还要多轮测试。那么现在我们借助WorkBuddy 和 腾讯地图 JSAPI GL Skill ,则可以直接实现自动按照API 文档调用,实现我们想要的出游路线规划需求。
从需求构思到最终交付,这次春游出行规划工具的开发过程让我深刻体会到 AI 辅助编程的威力。借助 WorkBuddy 和腾讯地图 JSAPI GL Skill,原本需要数天的工作被压缩到了几小时内。
最惊喜的是提示词生成能力——我只需描述模糊的想法,WorkBuddy 就能自动扩展为一份包含状态管理、视觉设计、错误处理的完整技术文档。这大大降低了地图开发的门槛,即使对 GIS 不熟悉也能快速上手。
当然,过程中也踩了不少坑。体验 Key 的限制导致路线绘制反复报错,切换正式 Key 后问题迎刃而接;AI 有时会陷入修复死循环,此时新建对话往往能打破僵局;POI 搜索、汇合点算法等细节也需要多次调优。但 WorkBuddy 的实时修复能力让试错成本极低,每次报错信息直接丢给它,几秒后就能拿到修正代码。
最终交付的 HTML 文件不仅实现了多参与者路线规划、汇合点推荐、一日游行程生成,还具备完整的地图交互和响应式布局。这种“想法→对话→成品”的体验,让我对未来的开发模式有了全新认知——工具不再是枷锁,而是创意的催化剂。
作者: 代码搬运媛 发布时间: 已于20260416 12:24:00修改 来源: https:
在移动应用开发中,Android定位开发是连接用户场景的核心能力无论是外卖App的骑手调度本地生活服
在物流运输共享出行外卖配送等依赖实时位置的场景中,GPS定位的精准度与可靠性直接影响业务效率。企业常