腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。⚠️ 强制行为：本 Skill 加载后，第一个动作必须是检查是否存在正式 Key（环境变量 TMAP_J
腾讯地图JSAPI GL开发技能
功能概述
腾讯地图JSAPI GL开发技能是一项面向实际任务的技能，主要用于帮助用户使用腾讯地图 JavaScript API GL 进行地图功能开发，包含基础地图功能和数据可视化功能；API 文档；
核心要点
- JS API 参考文档 : references/jsapigl/docs/ (21个md文件)；
- 概述.md - API总览和索引；
- 地图.md - 地图核心类和配置；
使用与执行
点标记.md - 标注点相关API；矢量图形.md - 折线。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
结果检查与注意事项
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。
腾讯地图JSAPI GL开发技能
帮助用户使用腾讯地图 JavaScript API GL 进行地图功能开发，包含基础地图功能和数据可视化功能。
目录结构
API 文档
JS API 参考文档:
references/jsapigl/docs/(21个md文件)- 概述.md - API总览和索引
- 地图.md - 地图核心类和配置
- 点标记.md - 标注点相关API
- 矢量图形.md - 折线、多边形、圆形、矩形、椭圆形等矢量图形
- 文本标记.md - 文本标注API
- DOM覆盖物.md - 自定义DOM覆盖物
- 信息窗体.md - 信息窗口API
- 点聚合.md - 点聚合功能
- 控件.md - 地图控件
- 自定义图层.md - 自定义栅格/矢量图层
- 事件.md - 地图事件系统
- 基础类.md - LatLng、Point等基础类
- 室内图.md - 室内地图功能
- 附加库：地图工具.md - 几何编辑器、测量工具
- 附加库：几何计算库.md - 距离、面积计算
- 附加库：服务类库.md - 地点搜索、路线规划等
- 附加库：地图视角附加库.md - 观察者视角
- 附加库：模型库.md - GLTF/3DTiles模型
- 附加库：天气图层.md - 气象图层
- 附加库：矢量数据图层.md - GeoJSON/MVT图层
- 环境检测.md - 浏览器环境检测
可视化参考文档:
references/visualization/docs/(15个md文件)- 参考手册.md - 可视化API总览
- 弧线图.md - 3D弧线/流向图
- 散点图.md - 3D散点图
- 热力图.md - 经典热力图
- 蜂窝热力图.md - 蜂窝聚合热力图
- 网格热力图.md - 网格聚合热力图
- 轨迹图.md - 轨迹展示
- 区域图.md - 区域轮廓图
- 管道图.md - 3D管道图
- 辐射圈.md - 辐射圈效果
- 围墙面.md - 围墙面效果
- 水晶体.md - 3D水晶体效果
- 行政区划.md - 行政区划展示
- 事件.md - 可视化事件系统
- 基础类.md - 可视化基础类
示例代码
JS API Demos:
references/jsapigl/demos/(129个html文件)- 按功能分类：地图操作、点标记、文本标记、点聚合、折线、多边形、控件、信息窗口、服务类、个性化地图、几何计算、模型库、应用工具、自定义覆盖物、城市漫游等
可视化 Demos:
references/visualization/demos/(44个html文件)- 按图层类型分类：弧线图、散点图、热力图、轨迹图、蜂窝图、区域图、水晶体等
前置检查：API Key
有 Key（env 变量 TMAP_JSAPI_KEY 或 ~/.tencentmap/tempkey.json）直接使用；无 Key 时向用户输出以下选项：
- 申请临时体验 Key（推荐）：手机验证即可，14 天有效
- 前往官网注册正式 Key：https://lbs.qq.com/dev/console/key/manage
用户选择"申请临时 Key" → 读取 tempkey-guide.md 按其中步骤执行
工作流程
1. 理解用户需求
当用户询问腾讯地图API相关问题时：
- 明确用户需要的功能类型（基础地图/可视化）
- 确定具体要使用的类或功能
2. 查询 API 文档
在 references/jsapigl/docs/ 或 references/visualization/docs/ 中查找相关API文档：
- 搜索关键词（如"点标记"、"热力图"）
- 阅读对应类的说明、配置参数、方法
3. 查找示例代码
在对应 demos 目录中查找示例：
- JS API示例：
references/jsapigl/demos/ - 可视化示例：
references/visualization/demos/ - 示例命名格式：
功能分类_具体示例.html
4. 提供解决方案
根据文档和示例，为用户提供：
- API接口说明
- 代码示例
- 注意事项和最佳实践
使用示例
用户问题: "如何在地图上添加标记点？"
执行流程:
- 读取
references/jsapigl/docs/点标记.md了解 MultiMarker API - 查看
references/jsapigl/demos/中的点标记相关示例 - 提供完整的代码示例和说明
用户问题: "怎么画一个热力图？"
执行流程:
- 读取
references/visualization/docs/热力图.md了解 Heat API - 查看
references/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 }
]);
注意事项
JS API GL
- 版本: 当前为 GL 版本，支持3D地图和WebGL渲染
- 浏览器兼容: 现代浏览器，IE11+（需polyfill）
- 坐标系: 使用 gcj02 坐标系
- 地图创建（重要）: 地图创建的容器一定要有固定宽高，尤其是flex布局下
- API使用（重要）: 所有功能的API调用都必须使用文档中出现的接口、属性、事件，不能自己编造；
- API传参（重要）: 所有的API传入参数必须严格遵守api文档中说明的格式，如果不确定就去看看对应demo，包括demo中的数据格式；
- 附加库的使用: 使用附加库需要在API加载URL中添加
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>
可视化 API
- 数据格式: 可视化图层需要特定格式的数据输入
- 性能: 大数据量时注意性能优化
- 层级: 可视化图层可以设置显示层级
- 事件: 支持点击、悬停等交互事件
- API使用（重要）: 所有功能的API调用都必须使用文档中出现的接口、属性、事件，不能自己编造
- API传参（重要）: 所有的API传入参数必须严格遵守api文档中说明的格式，如果不确定就去看看对应demo，包括demo中的数据格式；
最佳实践
- 模块化加载: 使用模块化方式按需加载API
- 错误处理: 添加地图加载失败的处理逻辑
- 内存管理: 及时销毁不需要的图层和覆盖物
- 性能优化: 大数据集使用聚合或抽稀
相关专题
在JavaScript中实现Base64编码，最直接的方式是使用内置的btoa()函数。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2025.10.24
379
9
在 html 中调用外部 js 可通过以下步骤：创建 js 文件并编写代码。在 html 代码中添加 <script> 标签，设置 src 属性为 js 文件路径。保存并刷新页面加载外部 js。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2024.04.11
1712
6
php和js的区别：PHP主要用于服务器端编程，而JavaScript主要用于客户端编程；PHP代码在服务器端执行，而JavaScript代码在客户端浏览器中执行。想了解更多php和js的相关内容，可以阅读本专题下面的文章。
2024.03.22
4828
11
在JavaScript中，document对象是一个非常重要的全局对象，它代表整个HTML文档。想了解更多Document的相关内容，可以阅读本专题下面的文章。
2024.03.14
6047
11
在JavaScript中，并没有一个内建的each函数，但jQuery库提供了一个非常有用的$.each() 函数，用于遍历数组或对象。想了解更多each函数的相关内容，可以阅读本专题下面的文章。
2024.03.13
1629
5
js和vue的关系：1、js作为web开发基石；2、vue.js作为前端框架的崛起；3、js与vue的互补关系；4、js与vue的实践应用。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2024.03.11
353
5
PHP中文网为大家带来，js实现弹幕功能的方法：1、创建html文件；2、添加html代码架构；3、在body标签中使用div、input、button标签分给页面设计效果显示框、输入框、弹幕提交按钮；4、添加script标签并写入js代码来实现弹幕效果；5、通过浏览器方式查看设计效果即可。希望对大家有所帮助。
2024.03.04
2992
11
js事件冒泡可以解决的问题：1、简化事件处理逻辑；2、提高事件处理性能；3、实现自定义组件和交互效果；4、控制事件传播方向；5、解决事件覆盖问题；6、实现全局事件监听；7、方便调试和排查问题。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2024.02.23
2824
4
js的split方法是字符串的一个方法，用于将字符串按照指定的分隔符分割成子字符串，并返回一个新的数组，其语法为“string.split(separator, limit)”。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2023.11.24
1127
5
热门下载
相关下载
精品课程
共39课时 | 5.2万人学习
共101课时 | 20.4万人学习
共39课时 | 4.7万人学习
