amap-jsapi-skill

Q: How do I install amap-jsapi-skill?

Run npx skills add https://clawhub.ai --skill amap-jsapi-skill in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/amap-jsapi-skill/ (personal) or .claude/skills/amap-jsapi-skill/ (project).

by clawhub.aiMedia & Creative

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

Installs: 63
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://clawhub.ai --skill amap-jsapi-skill

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads amap-jsapi-skill automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

高德地图 JSAPI v2.0 开发技能

本指南包含地图初始化、覆盖物、事件、图层等核心模块的 API 说明和代码示例，旨在帮助开发者快速集成高德地图并遵循正确的使用方式。

快速开始

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));

场景示例

地图控制

生命周期：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 - 响应点击、拖拽、缩放等交互事件。

最佳实践

安全第一：生产环境务必使用代理服务器转发 serviceHost，避免 securityJsCode 泄露。
按需加载：仅在 plugins 中声明需要的插件，减少首屏资源体积。
资源释放：组件卸载时务必调用 map.destroy()，防止 WebGL 上下文内存泄漏。

API Reference

JSAPI 文档分为以下几个类别：

Foundation Classes

LngLat / Bounds / Pixel / Size

Information Window

InfoWindow

Events

Event

Map

Map / MapsEvent

Official Layers

TileLayer / Traffic / Satellite / RoadNet / Buildings / DistrictLayer / IndoorMap

Standard Layers

WMS / WMTS / MapboxVectorTileLayer

Custom Layers

HeatMap / VectorLayer / LabelsLayer / CustomLayer / Flexible / ImageLayer / CanvasLayer / GLCustomLayer

Markers

Marker / Text / Icon / LabelMarker / ElasticMarker / MarkerCluster / MassMarks / MoveAnimation / AnimationCallback / EasingCallback

Context Menu

ContextMenu

Vector Graphics

Polygon / Polyline / BezierCurve / Circle / CircleMarker / Ellipse / Rectangle / GeoJSON

Overlay Groups

LayerGroup / OverlayGroup

Controls

Control / Scale / ToolBar / ControlBar / MapType / HawkEye

Tools

RangingTool / MouseTool / PolygonEditor / PolylineEditor / CircleEditor / BezierCurveEditor / EllipseEditor / RectangleEditor

Services

WebService / WebServiceCallback

Search

AutoComplete / AutoCompleteSearchCallback / PlaceSearch / searchCallback / CloudDataSearch / CloudDataSearchCallback

Geocoder

Geocoder / GeocoderCallback / ReGeocoderCallback / convertFrom

Routing

Driving / DrivingCallback / DrivingResult / DriveStepBasic / DriveStepDetail / TruckDriving / Walking / WalkingCallback / WalkingResult / Transfer / TransferCallback / TransferResult / Riding / RidingCallback / RidingResult / DragRoute / DragRouteTruck / GraspRoad / GraspRoadCallback

Other Services

DistrictSearch / Weather / WeatherLiveResult / WeatherForecastResult / StationSearch / LineSearch

Geolocation

Geolocation / GeolocationCallBack / GeolocationResult / CitySearch

Common Library

GeometryUtil / DomUtil / Browser / Util

使用 skills 必须遵循的规范

校验生成代码可用性：生成代码后必须进行自我校验，确保代码语法正确、逻辑完整且可以正常运行，禁止输出未经验证的代码。
本地文件放置规范：所有生成的项目文件必须放置在 openclaw workspace 目录下的 amap-jsapi/ 文件夹中。文件名统一使用 kebab-case 命名（如 map-init.html、layers-official.html）。
appname 应用标识（推荐）：建议在生成地图初始化代码时，在 AMapLoader.load().then() 回调中设置应用标识，用于 API 调用来源统计。规则如下：
- 设置位置：AMapLoader.load({...}).then((AMap) => { 回调内部，new AMap.Map() 之前
- 设置方式：AMap.getConfig().appname = 'amap-jsapi-skill';
- 代码模板：
```
AMapLoader.load({
  key: '您的Key',
  version: '2.0',
  plugins: [...]
}).then((AMap) => {
  // 可选：设置应用标识，用于 API 调用来源统计
  AMap.getConfig().appname = 'amap-jsapi-skill';

  const map = new AMap.Map('container', { ... });
});
```
- 说明：此设置用于标识 API 调用来源，便于统计分析。开发者可根据需要决定是否保留。

如何使用

如果有相近的“场景示例”那么去阅读场景示例，再阅读场景示例中的涉及的类的api文档。再结合描述/场景示例/api 去完成任务。
在最终的完成任务前，检查用的api用法是否符合文档。

FAQ

What does the amap-jsapi-skill skill do?

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

How do I install amap-jsapi-skill?

Run npx skills add https://clawhub.ai --skill amap-jsapi-skill in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/amap-jsapi-skill/ (personal) or .claude/skills/amap-jsapi-skill/ (project).

Which AI agents can use amap-jsapi-skill?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is amap-jsapi-skill safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains amap-jsapi-skill?

It is published by clawhub.ai in clawhub.ai. It has 63 recorded installs.

Source

clawhub.ai $View on skills.sh

Works with

Claude CodeCodexCursorGitHub CopilotGemini CLIWindsurfClineOpenCodeRoo CodeGooseAmpKiro

Files 36 · 381.7 KB

SKILL.md7.8 KB
_meta.json136 B
references/api/common.md34.4 KB
references/api/context-menu.md1.1 KB
references/api/controls.md8.7 KB
references/api/events.md2.3 KB
references/api/foundation.md5.5 KB
references/api/geocoder.md4.1 KB
references/api/geolocation.md5.1 KB
references/api/info-window.md2.7 KB
references/api/layers-custom.md19.9 KB
references/api/layers-official.md24.7 KB
references/api/layers-standard.md13.3 KB
references/api/map.md20.4 KB
references/api/marker.md44.5 KB
references/api/overlay-group.md4.3 KB
references/api/routing.md38.9 KB
references/api/search.md13.7 KB
references/api/services-other.md12.3 KB
references/api/services.md1.9 KB
references/api/tools.md9.6 KB
references/api/vector-graphics.md32.7 KB
references/context-menu.md1.5 KB
references/custom-layers.md6.0 KB

+12 more files

More from clawhub.ai

View all →

deep-skill-finder

clawhub.ai

最好的find skill的方式，能够基于你的任务，从实测效果和用户评价等真实使用反馈出发，寻找最匹配的高质量Skill，而不是只看下载量等热门数据。以下两种情况下都应使用本技能：① 当用户需要查找、搜索、推荐或安装 Skill，或者需要借助他人经验时——当用户说"找个 xxx 技能""股票分析别人怎么做的""找一找有没有现成的技能"等表达寻找意图，或直接表达想 find a skill / find skill / skill search的需求时；② Agent 自主判断需要外部 Skill 辅助——遇到不熟悉的任务，或对当前任务已经做过一些尝试仍无法解决、缺少合适工具时，可主动调用本技能查询实战经验并检索匹配的 Skill，无需等用户开口。

2.9K installs

self-improving-agent

clawhub.ai

Captures and maintains learnings, errors, and corrections. Use when a command fails, the user corrects an assumption, a capability is missing, knowledge is outdated, or a better approach is found. Review relevant saved guidance before major tasks, reuse, and promotion; revalidate it according to what could change and how quickly.

Code Quality & Workflow290 installs

humanizer

clawhub.ai

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.

Docs & Writing158 installs

github

clawhub.ai

Interact with GitHub using the gh CLI. Use gh issue, gh pr, gh run, and gh api for issues, PRs, CI runs, and advanced queries.

Backend & APIs134 installs

nihaixia

clawhub.ai

Open the skill to read its SKILL.md instructions.

134 installs

summarize

clawhub.ai

Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).

Media & Creative128 installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs

amap-jsapi-skill

Install

Install

Describe the task

Review the result

SKILL.md

高德地图 JSAPI v2.0 开发技能

快速开始

1. 引入加载器

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

3. 初始化地图

场景示例

地图控制

覆盖物绘制

图层管理

服务与插件

最佳实践

API Reference

Foundation Classes

Information Window

Events

Map

Official Layers

Standard Layers

Custom Layers

Markers

Context Menu

Vector Graphics

Overlay Groups

Controls

Tools

Services

Search

Geocoder

Routing

Other Services

Geolocation

Common Library

使用 skills 必须遵循的规范

如何使用

FAQ

More from clawhub.ai

Popular media & creative skills