高德地图 Skill：让 Claude Code 直接帮你写地图应用，装两个 skill 就够
高德地图 Skill：让 Claude Code 直接帮你写地图应用，装两个 skill 就够
想在项目里加个地图功能，还在翻文档抄 API？现在可以让 AI 直接写了。
地图开发有个老问题：高德 JS API 能力很强，但 API 多、参数杂，每次用都要翻文档查 AMap.PlaceSearch 怎么配、路径规划插件叫什么名。资深前端也得对着文档写，新手更是一头雾水。
高德官方最近给了一条新路：把地图能力封装成 Skill（技能包），专门给 Claude Code、Cursor、Windsurf 这些 AI 编程工具用。装上之后，你直接跟 AI 说「帮我搜附近餐厅并在地图上标注」，AI 自己知道该调哪个 API、参数怎么填，连代码带逻辑一起生成。
这不是社区第三方封装，是高德开放平台官方出品的。一共就两个 Skill，覆盖了地图开发绝大多数场景。
本文提纲
- 两个 Skill 各管什么
- 第一个：amap-jsapi-skill（前端地图开发）
- 第二个：amap-lbs-skill（LBS 综合服务）
- 三大能力：搜索、规划、可视化
- 怎么装上用起来
- 选哪个 Skill 的速查表
- 几个实操注意点
两个 Skill 各管什么
高德把能力拆成两个 Skill，分工很清楚：
| Skill | 定位 | 核心能力 | 适合场景 |
|---|---|---|---|
| amap-jsapi-skill | 前端地图开发 | JS API v2.0 全套，地图渲染、覆盖物、图层、事件 | 开发带地图的网页应用 |
| amap-lbs-skill | LBS 综合服务 | POI 搜索、路径规划、旅游规划、热力图、地图链接 | 对话式查询、数据服务、生成链接 |
记住一个区分原则：要在网页里画一张看得见的交互地图，用 jsapi-skill；要在对话里问「附近有什么」并拿结果，用 lbs-skill。 两者经常配合使用——lbs-skill 负责拿数据，jsapi-skill 负责渲染。
graph LR
A[User Request] --> B{Need interactive map?}
B -->|Yes, render on page| C[amap-jsapi-skill]
B -->|No, just query data| D[amap-lbs-skill]
C --> E[Map init, markers, layers, routes]
D --> F[POI search, route plan, heatmap link]
C -.->|get data| D
style A fill:#FF6B6B,color:#000000
style C fill:#4ECDC4,color:#000000
style D fill:#45B7D1,color:#000000第一个：amap-jsapi-skill（前端地图开发）
这个 Skill 覆盖高德地图 JS API v2.0（WebGL） 的完整开发能力。装上之后，AI 能帮你写这些：
地图生命周期：加载器引入、安全密钥配置（securityJsCode，v2.0 起必须配）、Map 实例创建与销毁。很多新手卡在「地图不显示」就是因为没配安全密钥，AI 装了这个 skill 会自动帮你处理。
3D 视图控制：缩放（zoom）、平移（center）、俯仰（pitch）、旋转（rotation）。做 3D 城市可视化、卫星视角这些效果，参数 AI 都知道。
覆盖物绘制：点标记（Marker）、海量标注（LabelMarker）、信息窗体（InfoWindow）、右键菜单。这是地图应用最常用的——标点、弹窗、批量标注。
矢量图形：折线（Polyline）、多边形（Polygon）、圆（Circle）、贝塞尔曲线（BezierCurve）、椭圆、矩形。画电子围栏、轨迹线、区域范围全靠这些。
图层管理：标准图层、卫星图层、路网、3D 楼块、WMS/WMTS、Canvas 图层，还有 GLCustomLayer（能集成 Three.js 做 3D 效果）。
路径规划插件：驾车（Driving）、步行（Walking）、公交（Transfer）、骑行（Riding）、货车（TruckDriving，考虑限行）、可拖拽路线（DragRoute）。
举个 AI 生成的前端搜索代码，长这样：
AMapLoader.load({
key: '您的Key',
version: '2.0',
plugins: ['AMap.PlaceSearch']
}).then((AMap) => {
const map = new AMap.Map('container', { zoom: 13 });
const placeSearch = new AMap.PlaceSearch({
pageSize: 10,
city: '北京',
citylimit: true,
map: map // 搜索结果自动标注到地图
});
placeSearch.search('餐厅', function(status, result) {
if (status === 'complete') {
console.log('搜索结果：', result.poiList.pois);
}
});
});你跟 Claude Code 说「在这个页面加个北京餐厅搜索，结果标在地图上」，它直接生成这段，连 AMapLoader 的异步加载、插件注册、回调处理都帮你写好。
第二个：amap-lbs-skill（LBS 综合服务）
这个 Skill 走的是高德开放平台 Web Service 接口，不渲染地图，而是返回结构化数据或生成地图链接。适合对话式交互和后端服务场景。
它的能力更「服务化」：
POI 搜索：关键词搜索、城市限定、类型筛选。用户说「搜美食」，直接生成高德地图搜索链接 https://www.amap.com/search?query=美食，点击就能看。
周边搜索：基于坐标和半径搜周边。这个有意思——AI 会自动拆解你的输入，先地理编码拿到坐标，再拼带坐标的链接：
你：西直门周边美食
步骤1 → 位置: 西直门, 类别: 美食
步骤2 → 坐标: 116.353138, 39.939385
步骤3 → https://ditu.amap.com/search?query=美食&longitude=116.353138&latitude=39.939385&range=1000智能旅游规划：这是个亮点功能。你说「北京一日游，景点+美食+酒店」，它自动搜索各类兴趣点（每类最多 5 个），再规划游览路线，支持步行/驾车/骑行/公交：
# 命令行调用（skill 自带脚本）
node scripts/travel-planner.js --city=杭州 --interests=西湖,美食,茶馆 --routeType=walking在线热力图：零代码生成。你给一份数据 URL，它拼出一个可视化链接，点击直接看热力图，不用写一行渲染代码：
用户：用这份数据生成热力图，暗黑模式
生成：https://a.amap.com/jsapi_demo_show/static/openclaw/heatmap.html?mapStyle=grey&dataUrl=...三大能力：搜索、规划、可视化
把两个 Skill 的能力按场景归类，地图开发逃不出这三类：
搜索能力：jsapi-skill 在前端做交互式搜索（PlaceSearch、AutoComplete、Geocoder），lbs-skill 在对话里做快速查询生成链接。前者嵌进你的网页，后者适合 AI 对话场景。
规划能力：日常出行路线（jsapi-skill 的 Driving/Walking/Transfer/Riding 插件，结果渲染到地图）+ 旅游行程规划（lbs-skill 的 travel-planner，自动串联兴趣点）。覆盖从「A 到 B 怎么走」到「一整天怎么玩」。
可视化能力：jsapi-skill 的海量点（MassMarks）、标注层（LabelsLayer）、WebGL 自定义图层（GLCustomLayer，能接 Three.js）、卫星/路况/楼块图层；lbs-skill 的零代码热力图链接。从性能渲染到快速展示都覆盖。
怎么装上用起来
高德 Skill 通过 ClawHub 平台分发（OpenClaw 生态的技能市场）。安装分两步：
前置准备：装 ClawHub CLI
npm install -g clawhub
clawhub --version # 验证安装 Skill：
clawhub install amap-jsapi-skill # 前端地图开发
clawhub install amap-lbs-skill # LBS 综合服务装完后，在 Claude Code / Cursor / Windsurf 里，AI 就自动获得了高德地图能力。它会根据你的需求自动判断用哪个 Skill、调哪个 API。
Key 配置（必做）：
| Skill | 需要的 Key | 类型 |
|---|---|---|
| amap-jsapi-skill | AMAP_JSAPI_KEY |
Web 端 Key（JS API 用） |
| amap-lbs-skill | AMAP_WEBSERVICE_KEY |
Web 服务 Key（Web Service 用） |
Key 在高德开放平台控制台注册创建。注意两个 Skill 要的 Key 类型不一样，别搞混。lbs-skill 的 Key 支持环境变量、命令行参数、config.json 多种配置方式，首次运行会自动提示你填。
选哪个 Skill 的速查表
文档里给了一张很实用的选择表，我精简一下：
| 你的需求 | 用哪个 |
|---|---|
| 开发带地图的网页应用 | amap-jsapi-skill |
| 对话里快速搜地点 | amap-lbs-skill |
| 页面嵌入交互式搜索框 | amap-jsapi-skill |
| 规划路线并画在地图上 | amap-jsapi-skill |
| 对话式问路线（只要结果） | amap-lbs-skill |
| 旅游行程规划 | amap-lbs-skill |
| 开发自定义数据可视化 | amap-jsapi-skill |
| 快速生成热力图链接 | amap-lbs-skill |
| 3D 地图效果 | amap-jsapi-skill |
口诀：要画图用 jsapi，要数据用 lbs。 复杂场景两个一起用——lbs 拿数据，jsapi 做渲染。
几个实操注意点
安全密钥必须配。JS API v2.0 起，光有 Key 不够，还要配 securityJsCode，否则地图加载不出来。这是新手最常踩的坑。生产环境建议用代理服务器方式配密钥，别硬编码在前端。装了 skill 的 AI 会提醒你这点。
两个 Key 别混用。jsapi-skill 要的是「Web 端 Key」，lbs-skill 要的是「Web 服务 Key」，在高德控制台创建时类型要选对。用错了会报权限错误。
lbs-skill 的脚本依赖 Node.js + axios。jsapi-skill 主要生成前端代码（浏览器跑），lbs-skill 的脚本在本机跑（Node.js 环境），环境要求不一样。
热力图数据要 URL 可访问。lbs-skill 的热力图功能需要你提供数据的 URL（JSON 格式），不是本地文件路径。数据得先放到可公网访问的地方。
货车路径规划有限行数据。jsapi-skill 的 TruckDriving 会考虑货车限行——做物流场景这个很有用，小轿车规划可能开进禁行区，货车规划会避开。这是很多人不知道的隐藏能力。
高德做这两个 Skill 的思路很对：不自己做一个「AI 地图助手」封闭产品，而是把能力开放成 Skill，让用户用自己顺手的 AI 工具（Claude Code / Cursor）来调。对开发者来说，这意味着不用再死记 API，把需求说清楚，AI 帮你从选 API 到写代码一气呵成。如果你项目里要加地图功能，花十分钟装上这两个 Skill，比翻半天文档效率高得多。
参考文档与链接
- 高德开放平台 Skill 介绍 — 官方文档，两个 Skill 的完整能力说明与选择建议
- amap-jsapi-skill — ClawHub — 前端地图开发技能安装页
- amap-lbs-skill — ClawHub — LBS 综合服务技能安装页
- 高德 JS API v2.0 文档 — Skill 封装的底层 API 完整参考
- 高德开放平台控制台 — 注册账号、创建应用、获取 Key
- ClawHub CLI —
npm install -g clawhub安装技能市场工具 - 高德 Web Service API — lbs-skill 调用的后端接口参考
项目里要加地图功能的，装上这两个 skill 试试，让 AI 直接写。你在用哪个地图 API？评论区聊聊。觉得有用点个赞让更多人看到。
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
本文首发于 AI人工智能时代，转载请注明出处。
