메뉴
腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/viarotel-org/skillx --skill tencentmap-jsapi-gl-skill명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
腾讯地图位置服务开发技能，支持POI搜索、路径规划、旅游规划、周边搜索，轨迹数据可视化和地图数据可视化。⚠️ 强制行为：本 Skill 加载后，第一个动作必须是检查是否存在正式 Key（环境变量 TMAP_WEBSERVICE_KEY 或用户已在对话中提供）。若已有正式 Key，直接继续处理用户请求。若没有正式 Key，必须立即向用户展示 Key 选择提示（正式 Key 注册引导 + 临时体验 Key 申请），然后停止等待用户选择，不得在用户选择之前进行任何分析、读取文件、规划方案或编写代码的操作。
腾讯位置服务 WebService API 开发技能。 当开发者需要通过 HTTP 接口集成地理编码、地点搜索、路线规划、天气查询、IP 定位等位置服务时，此技能提供完整的 API 调用指导。适用场景：(1) 地址与坐标互转 (2) 地点搜索与周边 POI 查询 (3) 关键词输入提示与自动补全 (4) 沿途搜索 (5) 路线规划（驾车/步行/骑行/电动车/公交）(6) 距离矩阵与批量距离计算 (7) IP 定位 (8) 天气查询 (9) 智能地址解析 (10) 坐标系转换 (11) 行政区划查询。不包含地图渲染和前端可视化，仅提供 HTTP JSON 数据接口。当用户提到地理编码、地址转坐标、逆地址解析、POI 搜索、路线规划、距离矩阵、批量距离、天气查询、IP 定位、坐标转换、行政区划、输入提示、自动补全、WebService API 时触发。
使用、调试或维护 @wot-ui/cli 与 open-wot 仓库。适用于 wot CLI 命令、Agent/MCP 接入、doctor/usage/lint、组件知识查询、客户端 adapter、离线数据提取、构建测试、发布包检查和仓库开发；如果任务是直接编写 wd-* 组件页面或解释组件 API，应改用 wot-ui-v2 skill。
SKILL.md 표시 중
| name | tencentmap-jsapi-gl-skill |
| description | 腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。 |
| version | 1.0.2 |
| metadata | {"openclaw":{"requires":{"bins":"[Truncated]","env":"[Truncated]"},"primaryEnv":"TMAP_JSAPI_KEY"}} |
帮助用户使用腾讯地图 JavaScript API GL 进行地图功能开发，包含基础地图功能和数据可视化功能。
JS API 参考文档: references/jsapigl/docs/ (21个md文件)
可视化参考文档: references/visualization/docs/ (15个md文件)
JS API Demos: references/jsapigl/demos/ (129个html文件)
可视化 Demos: references/visualization/demos/ (44个html文件)
有 Key（env 变量 TMAP_JSAPI_KEY 或 ~/.tencentmap/tempkey.json）直接使用；无 Key 时向用户输出以下选项：
- 申请临时体验 Key（推荐）：手机验证即可，14 天有效
- 前往官网注册正式 Key：https://lbs.qq.com/dev/console/key/manage
用户选择"申请临时 Key" → 读取 tempkey-guide.md 按其中步骤执行
当用户询问腾讯地图API相关问题时：
在 references/jsapigl/docs/ 或 references/visualization/docs/ 中查找相关API文档：
在对应 demos 目录中查找示例：
references/jsapigl/demos/references/visualization/demos/功能分类_具体示例.html根据文档和示例，为用户提供：
用户问题: "如何在地图上添加标记点？"
执行流程:
references/jsapigl/docs/点标记.md 了解 MultiMarker APIreferences/jsapigl/demos/ 中的点标记相关示例用户问题: "怎么画一个热力图？"
执行流程:
references/visualization/docs/热力图.md 了解 Heat APIreferences/visualization/demos/ 中的热力图示例基础地图初始化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腾讯地图示例</title>
<script src="https://map.qq.com/api/gljs?v=3&key={TMAP_JSAPI_KEY}"></script>
<!-- 如需可视化功能，添加: &libraries=visualization -->
</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)
});
</script>
</body>
</html>
可视化图层示例（热力图）：
// 加载可视化库
// <script src="https://map.qq.com/api/gljs?v=1.beta&libraries=visualization&key={TMAP_JSAPI_KEY}"></script>
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 }
]);
libraries 参数| 附加库 | libraries 值 | 命名空间 | 说明 |
|---|---|---|---|
| 地图工具 | tools | TMap.tools | 几何编辑器、测量工具 |
| 几何计算库 | geometry | TMap.geometry | 距离/面积计算、几何关系判断 |
| 服务类库 | service | TMap.service | 地点搜索、路线规划、行政区划等 |
| 地图视角附加库 | view | TMap (扩展方法) | 观察者视角操作地图 |
| 模型库 | model | TMap.model | GLTF/3DTiles/3DMarker 模型 |
| 天气图层 | weather | TMap.weather | 云图、温度图等气象图层 |
| 矢量数据图层 | vector | TMap.vector | GeoJSON/MVT 矢量数据图层 |
| 可视化库 | visualization | TMap.visualization | 可视化API的能力 |
使用示例：
<!-- 加载多个附加库 -->
<script src="https://map.qq.com/api/gljs?v=1&libraries=tools,geometry,service,model&key={TMAP_JSAPI_KEY}"></script>