Agent Skills
返回列表
腾讯地图 JSAPI GL 开发

腾讯地图 JSAPI GL 开发

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @tencent-adm/tencentmap-jsapi-gl-skill。

技能介绍

解决的问题

腾讯地图 JSAPI GL 开发常见痛点，不只是“会建一个地图对象”，还包括 Key 明文泄露、坐标系不一致、附加库加载错误、可视化图层数据格式不确定，以及 HTML 生成后缺少 容器缺失、CDN 失败、WebGL 不支持 等异常处理。该技能把这些约束整理成可查阅的文档、示例与安全流程。

技能如何工作

  • 按 基础地图 或 数据可视化 两类需求检索 references/jsapigl/docs/ 与 references/visualization/docs/。
  • 使用 点标记、热力图、弧线图、模型库、GeoJSON/MVT 等对应 API 文档确认类、属性和事件。
  • 从 129 个 JS API 示例与 44 个可视化示例中定位可运行 HTML，校验参数与数据格式。
  • 按 Key 流程处理：保存用户 Key、无 Key 时引导临时体验 Key、报错时切换候选 Key。
  • 生成 HTML 时检查 map.qq.com/api/gljs 加载、容器宽高、TMap 命名空间，并给出代理转发与明文 Key 风险提醒。

边界与注意点

适用于腾讯地图 JSAPI GL，而非其他地图 SDK。坐标系要求 GCJ-02，WGS-84、BD09 等坐标需先转换。附加库必须在加载 URL 中通过 libraries 引入，例如 model、weather、visualization。浏览器需支持 WebGL；生成代码应覆盖容器不存在、CDN 加载失败和浏览器不支持的提示。

使用场景

  • 前端工程师在 React/Vue 页面里用腾讯地图 JSAPI GL 添加点标记、信息窗体和自定义 DOM 覆盖物，并按 demos 校验参数。
  • 数据产品同学把门店坐标和销量数据做成蜂窝热力图、散点图或轨迹图，并确认可视化图层数据格式与层级。
  • 全栈开发者将 Key 放到自有 Nginx 代理，避免 HTML 明文泄露，并按安全检查生成含 TMap JSAPI 的页面。
  • 前端工程师生成地图 HTML 后，补齐容器不存在、CDN 加载失败和 WebGL 不支持三类异常提示。

适合人员

  • 负责 Web 地图页面的前端工程师：需要快速查 TMap 点标记、控件、信息窗体 API 与示例。
  • 做 GIS 可视化或 BI 地图看板的数据工程师：需要确认热力图、弧线图、区域图的数据格式和事件。
  • 需要落地 Key 安全的全栈工程师：希望把 JSAPI Key 放到代理、避免明文写在 HTML 中。
  • 维护内部运营工具的产品技术同学：要生成含腾讯地图、异常提示和固定容器布局的 HTML 页面。