基础能力 Skill

概述

AI助手能够借助Skill学习新技能，OpenClaw可以安装不同的Skill获得特定领域的专业能力,在对话中自动识别用户意图并调用对应的Skill来完成任务。

腾讯地图目前提供了两个核心 Skill:

Skill 名称	定位	核心能力	下载地址
TencentMap_jsapi_skills	前端地图开发	地图初始化、3D 视图控制、覆盖物绘制、图层管理、事件系统、可视化渲染、三维模型展示	TencentMap_jsapi_skills
TencentMap_lbs_skills	LBS 综合服务	周边搜索、旅游规划、轨迹图可视化	TencentMap_lbs_skills
TencentMap_webservice_skills	WebserviceAPI服务	提供地址转换、POI 搜索、路线规划、距离矩阵、IP 定位、天气查询等	TencentMap_webservice_skills

基础能力介绍

tmap-jsapi-gl - 前端地图开发技能

该 Skill 涵盖腾讯地图 JavaScript API GL 的完整开发能力:

地图生命周期管理: API 加载、Key 配置、Map 实例创建与销毁
3D 视图控制: 缩放(zoom)、平移(center)、俯仰(pitch)、旋转(rotation)
覆盖物绘制: 点标记(MultiMarker)、文本标记(MultiLabel)、信息窗体(InfoWindow)、DOM覆盖物
矢量图形: 折线(MultiPolyline)、多边形(MultiPolygon)、圆(MultiCircle)、椭圆(MultiEllipse)、矩形(MultiRectangle)
图层管理: 标准图层、卫星图层、路况图层、WMS/WMTS 图层、自定义栅格图层、GLCustomLayer(Three.js 集成)
事件系统: 点击、拖拽、缩放等交互事件的监听与响应
可视化渲染: 热力图、散点图、弧线图、轨迹图、蜂窝热力图、网格热力图、区域图、管道图、辐射圈、水晶体
LBS 服务插件: 地理编码/逆地理编码、路径规划(驾车/步行/公交)、POI 搜索与输入提示
工具类: 测距工具、几何编辑器、几何计算库
三维模型: GLTF 模型、3DTiles 模型、3D Marker

tmap-lbs-skill - LBS 综合服务技能

该 Skill 基于腾讯位置服务开放能力,提供开箱即用的地理信息服务:

POI 搜索: 关键词搜索、城市限定、类型筛选
周边搜索: 基于坐标和半径的周边地点搜索
智能旅游规划: 自动搜索兴趣点并规划游览路线,推荐餐厅酒店
轨迹可视化: 将 GPS 轨迹数据以轨迹图形式可视化展示
配置持久化: API Key 本地存储管理

TencentMap_webservice_skills - WebService HTTP 接口技能

该 Skill 基于腾讯位置服务 WebService API（HTTPS/JSON），适用于任何编程语言的服务端集成：

地址服务：地址→坐标（正地理编码）、坐标→地址（逆地理编码）、非结构化文本智能地址解析
搜索服务：关键词/周边/矩形范围地点搜索、沿途 POI 搜索、关键词自动补全提示、行政区划查询
路线规划：驾车、步行、骑行、电动车、公交五种出行方式，支持途经点与路线策略
距离矩阵：批量计算多起点×多终点的距离与时间，替代循环调用
定位与天气：IP 定位（城市级）、实况/预报/逐小时天气查询
坐标转换：GPS/百度等坐标系单向转入腾讯地图 GCJ-02 坐标系
Key 管控：自动检测正式 Key，未配置时引导注册或切换受限体验模式

场景一:搜索能力

搜索是地图应用中最高频的需求。两个 Skill 从不同维度提供了搜索能力。

前端搜索 (tmap-jsapi-gl)

通过 JS API 的 Search 和 Suggestion 接口,在前端页面中实现搜索功能。

适用场景: 需要在自己的网页中嵌入地图搜索功能,用户可以在页面上直接搜索并查看结果。

核心 API

接口	功能	说明
TMap.service.Search	POI 关键词搜索	支持城市限定、分页、类型筛选
TMap.service.Suggestion	输入提示	用户输入时实时推荐匹配地点
TMap.service.Geocoder	地理编码	地址与坐标互转
TMap.service.District	行政区划	查询行政区划边界

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>腾讯地图搜索示例</title>
    <script src="https://map.qq.com/api/gljs?v=1&libraries=service&key=[YOUR_KEY]"></script>
</head>
<body>
    <div id="map" style="width:100%;height:500px;"></div>
    <script>
        var map = new TMap.Map("map", {
            zoom: 12,
            center: new TMap.LatLng(39.984104, 116.307503)
        });
        
        var search = new TMap.service.Search({
            pageSize: 10
        });
        
        search.searchRegion({
            keyword: "餐厅",
            region: "北京"
        }).then(result => {
            console.log("搜索结果:", result.data);
        });
    </script>
</body>
</html>

开放平台的接口能力搜索 (tmap-lbs-skill)

通过腾讯位置服务 Web Service API 进行搜索,直接返回结构化数据或生成地图链接。

适用场景: 对话式交互中快速搜索地点。

场景 1: 关键词直接搜索

用户搜索一个明确的类别或地点,直接生成腾讯地图搜索链接可视化查看。

用户: 搜美食
生成: https://map.qq.com/m/place/search?keyword=美食

场景 2: 基于位置的周边搜索

用户搜索某个位置周边的地点,需要先通过地理编码获取坐标,再拼接搜索链接。

执行流程:

解析输入: 拆分出「位置」和「搜索类别」
地理编码: 调用 API 获取位置坐标
生成链接: 拼接带坐标的周边搜索链接

用户: 西直门周边美食
步骤1 → 位置: 西直门, 类别: 美食
步骤2 → 坐标: 39.939385,116.353138 (纬度,经度)
步骤3 → https://mapapi.qq.com/web/claw/nearby-search.html?keyword=美食&center=39.939385,116.353138&radius=1000&key=xxx

场景二:规划能力

规划能力覆盖日常出行路线规划和旅游行程规划两大方向。

前端路径规划和多人出行规划 (tmap-jsapi-gl)

通过 JS API 的路径规划接口, 能够获取规划数据并在地图上显示。

核心 API

接口	功能	说明
TMap.service.Driving	驾车路径规划	支持途径点、避让策略
TMap.service.Walking	步行路径规划	步行方案
TMap.service.Transit	公交路径规划	综合公交/地铁
TMap.service.Bicycling	骑行路径规划	自行车/电动车

代码示例

var driving = new TMap.service.Driving({
    policy: TMap.constants.DRIVING_POLICY.LEAST_TIME
});

driving.search({
    from: new TMap.LatLng(39.984104, 116.307503),
    to: new TMap.LatLng(39.915119, 116.403963)
}).then(result => {
    console.log("驾车路线:", result.result.routes[0]);
});

智能旅游规划 (tmap-lbs-skill)

自动搜索兴趣点并规划游览路线,一站式生成旅游方案。

使用示例

用户只需提供城市和想去的景点,AI 会自动完成:

解析景点列表
调用地理编码获取各景点坐标
拼接旅游规划链接

用户: 我想去北京玩,想去故宫、颐和园、香山、环球影城,给我规划最佳行程路线,并推荐餐厅和酒店

生成链接:
https://mapapi.qq.com/web/claw/travel.html?spots=[{"name":"故宫","lat":39.918,"lng":116.397},{"name":"颐和园","lat":39.999,"lng":116.275},{"name":"香山","lat":39.993,"lng":116.188},{"name":"环球影城","lat":39.843,"lng":116.681}]&recommend=restaurant,hotel&key=xxx

功能特点

自动获取多个景点的经纬度
智能规划最佳游览顺序
支持推荐沿途餐厅和酒店
一键跳转地图查看详细路线

场景三:数据可视化能力

数据可视化帮助用户将地理数据直观地展示在地图上。

前端可视化 (tmap-jsapi-gl)

通过 JS API 提供丰富的可视化图层能力。

核心可视化图层

图层类型	API	说明
热力图	TMap.visualization.Heat	经典热力图,支持 3D
散点图	TMap.visualization.Dot	3D 散点图
弧线图	TMap.visualization.Arc	3D 弧线/流向图
轨迹图	TMap.visualization.Trail	轨迹展示
蜂窝热力图	TMap.visualization.Hexagon	蜂窝聚合热力图
网格热力图	TMap.visualization.Grid	网格聚合热力图
区域图	TMap.visualization.Area	区域轮廓图
辐射圈	TMap.visualization.Radiation	辐射圈效果
水晶体	TMap.visualization.Prism	3D 水晶体效果

其他可视化能力

海量点标记: TMap.MultiMarker — 高性能渲染大量点标记
点聚合: TMap.MarkerCluster — 点聚合展示
Canvas 图层: TMap.CanvasGroundLayer — 自定义 Canvas 绑定到地图
图片图层: TMap.ImageGroundLayer — 将图片叠加到地图指定区域
WebGL 自定义图层: TMap.GLCustomLayer — 集成 Three.js 等 3D 渲染引擎
矢量数据图层: TMap.GeoJSONLayer / TMap.MVTLayer — GeoJSON/MVT 矢量数据

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>热力图示例</title>
    <script src="https://map.qq.com/api/gljs?v=1&libraries=visualization&key=[YOUR_KEY]"></script>
</head>
<body>
    <div id="map" style="width:100%;height:500px;"></div>
    <script>
        var map = new TMap.Map("map", {
            zoom: 12,
            center: new TMap.LatLng(39.984104, 116.307503)
        });
        
        var heat = new TMap.visualization.Heat({
            radius: 50,
            height: 100,
            gradientColor: {
                0: '#13B06A',
                0.4: '#13B06A', 
                0.8: '#E9AB1D',
                0.9: '#E9AB1D',
                1: '#E05649'
            }
        }).addTo(map);
        
        heat.setData([
            { lat: 39.984104, lng: 116.307503, count: 100 },
            { lat: 39.984504, lng: 116.307803, count: 80 }
        ]);
    </script>
</body>
</html>

在线轨迹可视化 (tmap-lbs-skill)

提供零代码的轨迹可视化能力,只需提供轨迹数据 URL 即可生成可视化链接。

URL 格式

https://mapapi.qq.com/web/claw/trail.html?dataUrl={数据地址(URL编码)}

使用示例

用户: 帮我用这份数据生成轨迹图
数据: https://example.com/track-data.json

生成链接:
https://mapapi.qq.com/web/claw/trail.html?dataUrl=https%3A%2F%2Fexample.com%2Ftrack-data.json

点击链接即可直接查看轨迹图效果,无需编写任何代码。

Skill 的选择建议

需求场景	推荐 Skill	原因
开发一个带地图的网页应用	tmap-jsapi-gl	提供完整的前端 API 和代码生成
在对话中快速搜索地点	tmap-lbs-skill	直接生成搜索链接,无需编码
在页面中嵌入交互式搜索	tmap-jsapi-gl	支持 Search、Suggestion 等插件
规划出行路线并展示在地图上	tmap-jsapi-gl	路线结果可直接渲染到地图
旅游行程规划	tmap-lbs-skill	内置智能旅游规划功能
开发自定义数据可视化页面	tmap-jsapi-gl	支持热力图、散点图、弧线图等多种可视化
快速生成轨迹图链接	tmap-lbs-skill	零代码,提供数据 URL 即可
3D 地图效果开发	tmap-jsapi-gl	支持 3D 视图、GLCustomLayer、三维模型
三维模型展示	tmap-jsapi-gl	支持 GLTF、3DTiles、3D Marker

前置配置

tmap-jsapi-gl

环境要求: 现代浏览器,支持 WebGL
必需配置: TMAP_JSAPI_KEY (腾讯 Web 端开发者 Key)
版本: JavaScript API GL 版本,支持 3D 地图和 WebGL 渲染
坐标系: 使用 gcj02 坐标系
浏览器兼容: 现代浏览器,IE11+(需 polyfill)

tmap-lbs-skill

环境要求: Node.js、curl
必需配置: TMAP_WEBSERVICE_KEY (腾讯 Web Service Key)
配置方式: 环境变量 / 首次运行自动提示

Key 获取方式

访问腾讯位置服务注册账号
进入控制台创建应用
根据需要创建 Web 端 Key(JS API 用)或 Web 服务 Key(Web Service 用)

OpenClaw 安装 Skill 教程：

以安装 tmap-jsapi-gl 为例

前置准备

确认你已安装 OpenClaw,然后安装 ClawHub CLI:

npm install -g clawhub

验证安装:

clawhub --version

第一步: 在 ClawHub 上找到 Skill

访问 Skill 页面查看详情:

第二步: 安装 Skill

在终端中运行:

clawhub install tmap-jsapi-gl-skill

如果需要安装指定版本:

clawhub install tmap-jsapi-gl-skill --version 1.0.1

安装完成后,Skill 文件会出现在你的 OpenClaw workspace 的 skills/ 目录下。

备注: 由于近期 Clawhub 使用人数过多和国内网络限制,建议可以直接下载skill并放置在 workspace/skill 目录下面。

第三步: 验证安装

查看已安装的 Skill 列表:

clawhub list

你应该能看到 Skill 出现在列表中。

第四步: 注册配置Key

如果您还没有腾讯地图开发者账号,请按以下步骤申请:

访问腾讯位置服务控制台
注册并登录账号
进入「应用管理」→「我的应用」
创建新应用并添加 Key
选择「Web端」服务类型
获取 Key

最后将生成的 Key 保存到 openclaw skill 配置中。

第五步: 开始使用

直接在 OpenClaw 对话中使用这个 Skill 的能力,例如:

“帮我用腾讯地图 JSAPI 创建一个 HTML 页面,显示腾讯地图,中心点在腾讯大厦,缩放级别 15”

OpenClaw 会自动识别并调用对应的 Skill,按 SKILL.md 中的指引为你生成代码或执行操作。

更新 Skill

未来如果 Skill 有新版本,运行:

clawhub update

更新全部已安装的 Skill:

clawhub update --all

卸载 / 管理

目前通过删除 skills// 目录即可移除该 Skill。

WorkBuddy 安装 Skill 教程：

前置准备

确认你已安装 WorkBuddy，下载地址：https://www.codebuddy.cn/work/

第一步: 在 WorkBuddy 打开插件市场，搜索tmap/腾讯地图

第二步: 点击安装插件

第三步: 注册配置Key

如果您还没有腾讯地图开发者账号,请按以下步骤申请:

访问腾讯位置服务控制台
注册并登录账号
进入「应用管理」→「我的应用」
创建新应用并添加 Key
选择「Web端」服务类型
获取 Key

第四步: 开始使用

直接在 Claw 对话中使用这个 Skill 的能力,对话时如果没有设置key会提示填写key，则将上一步申请的key填入即可，可以进行如下对话例如:

“帮我用腾讯地图 JSAPI 创建一个 HTML 页面,显示腾讯地图,中心点在腾讯大厦,缩放级别 15”

Claw 会自动识别并调用对应的 Skill,按 SKILL.md 中的指引为你生成代码或执行操作。

更新 Skill

点击右上角更新按钮进行更新

基础能力 Skill

概述

基础能力介绍

tmap-jsapi-gl - 前端地图开发技能

tmap-lbs-skill - LBS 综合服务技能

场景一:搜索能力

前端搜索 (tmap-jsapi-gl)

核心 API

代码示例

开放平台的接口能力搜索 (tmap-lbs-skill)

场景 1: 关键词直接搜索

场景 2: 基于位置的周边搜索

场景二:规划能力

前端路径规划和多人出行规划 (tmap-jsapi-gl)

核心 API

代码示例

智能旅游规划 (tmap-lbs-skill)

使用示例

功能特点

场景三:数据可视化能力

前端可视化 (tmap-jsapi-gl)

核心可视化图层

其他可视化能力

代码示例

在线轨迹可视化 (tmap-lbs-skill)

URL 格式

使用示例

Skill 的选择建议

前置配置

tmap-jsapi-gl

tmap-lbs-skill

Key 获取方式

OpenClaw 安装 Skill 教程：

前置准备

第一步: 在 ClawHub 上找到 Skill

第二步: 安装 Skill

第三步: 验证安装

第四步: 注册配置Key

第五步: 开始使用

更新 Skill

卸载 / 管理

WorkBuddy 安装 Skill 教程：

前置准备

第一步: 在 WorkBuddy 打开插件市场，搜索tmap/腾讯地图

第二步: 点击安装插件

第三步: 注册配置Key

第四步: 开始使用

更新 Skill

卸载

相关链接