核心功能: 本技能提供中文交互、化集成场景等能力。

Amap Jsapi Skill

付费版进阶功能

主要能力

• 高德地图 JSAPI v2
• 0 (WebGL) 开发技能
• 涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成
• \n\

开始使用

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

详细的输入输出格式请参考下方章节说明。

场景示例

不适用于：需要人工判断的复杂决策场景

使用方法

1. 引入加载器

使用 script 标签加载 loader.js：

<script src="https://webapi.amap.com/loader.js"></script>

2. 安全密钥配置 (强制)

重要：自 v2.0 起，必须在加载地图前配置安全密钥，否则无法通过鉴权。详情及后端代理示例请参考 安全策略.

安全提示：安全密钥属于敏感凭据，请通过环境变量 AMAP_SECURITY_JS_CODE 传入，禁止在代码中硬编码。生产环境务必使用 serviceHost 代理方式，避免前端暴露密钥.

// 在调用 AMapLoader.load 前执行
window._AMapSecurityConfig = {
  securityJsCode: process.env.AMAP_SECURITY_JS_CODE, // 通过环境变量安全获取
  // serviceHost: 'https://your-proxy-domain/_AMapService', // 生产环境：建议使用代理转发
};

3. 初始化地图

import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
    key: '您的Web端开发者Key', // 必填
    version: "2.0",           // 指定版本
    plugins: ['AMap.Scale', 'AMap.ToolBar'] // 预加载插件
}).then((AMap) => {
    // 可选：设置应用标识，用于 API 调用来源统计
    AMap.getConfig().appname = 'amap-jsapi-skill';
// ...
    const map = new AMap.Map('container', {
        viewMode: '3D',       // 开启3D视图
        zoom: 11,             // 初始缩放级别
        center: [116.39, 39.90] // 初始中心点
    });
    map.addControl(new AMap.Scale());
}).catch(e => console.error(e));

请求格式

返回格式

{
  "success": true,
  "data": {
    "result": "处理结果",
    "status": "success",
    "metadata": {
    "metadata": {
      "template_used": "reviewer",
      "word_count": 0,
      "style": "专业"
    }
  },
  "error": null
}

输出模板参考: assets/output.json

异常管理

安装与配置

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux

依赖说明(补充)

API Key 配置

可用性分类

• 分类: MD+execute()
• 说明: 基于Markdown的AI Skill,

API Key配置方式:

export API_KEY="${API_KEY:?请设置环境变量}"

配置后需重启会话或开启新终端生效。API Key应妥善保管,避免泄露到版本控制系统.

案例展示

地图控制

• 生命周期：references/map-init.md - 掌握 load、Map 实例创建及 destroy 销毁流程.
• 视图交互：references/view-control.md - 控制 zoom (缩放)、center (平移)、pitch (俯仰)、rotation (旋转).

覆盖物绘制

• 点标记：references/marker.md - 使用 Marker (基础)、LabelMarker (海量避让) 标注位置.
• 矢量图形：references/vector-graphics.md - 绘制 Polyline (轨迹、线)、Polygon (区域、面)、Circle (范围、圆).
• 信息展示：references/info-window.md - 通过 InfoWindow 展示详细信息.
• 右键菜单：references/context-menu.md - 自定义地图或覆盖物的右键交互.

图层管理

• 基础图层：references/layers.md - 标准、卫星、路网及 3D 楼块图层.
• 自有数据：references/custom-layers.md - 集成 Canvas、WMS/WMTS, GLCustomLayer 地图上叠加 Canvas、WMS图层、 Threejs图层.

服务与插件

• LBS 服务：
  • references/geocoder.md - 地理编码/逆地理编码（地址/坐标互转）.
  • references/routing.md - 路径规划（驾车/步行/公交）.
  • references/search.md - POI 搜索与输入提示.
• 事件系统：references/events.md - 响应点击、拖拽、缩放等交互事件.

问答汇总

Q1: 如何开始使用Amap Jsapi Skill？

A: 请参考使用流程和依赖说明章节，确保运行环境满足要求后调用本技能。

错误恢复方案

使用约束

• 需要API Key，无Key环境无法使用

技术创新

效率提升量化分析

差异化对比

核心痛点解决

常见问题FAQ

Q1: 如何在地图上添加覆盖物？

A: 在地图上添加覆盖物，首先需要获取地图实例，然后使用 map.addOverlay() 方法添加对应的覆盖物对象，如 Marker 或 Polygon。

Q2: 如何进行路径规划？

A: 进行路径规划，可以使用 AMap.Driving 或 AMap.Walking 对象进行驾车或步行路径规划，并调用其 search() 方法。

Q3: 如何设置地图的初始视图？

A: 设置地图的初始视图，可以在创建地图实例时通过 viewMode、zoom 和 center 属性进行设置。

Q4: 如何进行安全密钥配置？

A: 安全密钥配置需要在加载地图前进行，可以通过设置 window._AMapSecurityConfig 对象中的 securityJsCode 属性来配置。

Q5: 如何进行 LBS 服务集成？

A: LBS 服务集成可以通过调用高德地图 JSAPI 提供的相关接口实现，如 AMap.Location 进行位置定位，AMap.Search 进行搜索服务等。

问题排查手册

安全声明

1. 确保安全密钥不泄露，避免在代码中硬编码。
2. 使用服务端代理方式，避免前端暴露密钥。
3. 定期检查和更新 API 密钥，防止密钥泄露。
4. 对敏感数据进行加密处理，确保数据安全。
5. 监控 API 使用情况，及时发现异常行为。

安全风险防范

功能介绍

• 自动化执行: 高德地图 JSAPI v2.0 (WebGL) 开发技能。涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制
• 文件处理: 支持多种文件格式的读取、解析和写入操作
• API集成: 通过标准化接口调用外部服务并处理响应
• 命令执行: 在安全沙箱中执行系统命令并收集结果
• 信息检索: 快速搜索和过滤目标数据

技能通用排查步骤

1. 检查输入参数: 确认所有必填参数已提供且格式正确
2. 查看日志输出: 定位具体错误行和异常类型
3. 验证环境配置: 确认依赖库版本和运行环境满足要求
4. 逐步调试: 缩小问题范围,隔离故障模块

技能通用排查步骤

1. 检查输入参数: 确认所有必填参数已提供且格式正确
2. 查看日志输出: 定位具体错误行和异常类型
3. 验证环境配置: 确认依赖库版本和运行环境满足要求
4. 逐步调试: 缩小问题范围,隔离故障模块