Overview
- Skill Key
- duxiaohuidxh/amap-jsapi-skill
- Author
- duxiaohuidxh
- Source Repo
- openclaw/skills
- Version
- 1.1.0
- Source Path
- skills/duxiaohuidxh/amap-jsapi-skill
- Latest Commit SHA
- 81700c2ced82190abb20270e68ca6cc676e232c4
Official OpenClaw
rules
54%
amap-jsapi-skill
高德地图 JSAPI v2.0 (WebGL) 开发技能。涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。
Stars
0
Installs
0
Status
ACTIVE
Visibility
PUBLIC
安装方式
直接复制以下提示词，发送给你的 AI 助手即可完成安装。
请先检查是否已安装 SkillHub 商店，若未安装，请根据 https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/skillhub.md 安装 SkillHub 商店，然后安装 amap-jsapi-skill 技能。 若已安装，则直接安装 amap-jsapi-skill 技能。
Extracted Content
SKILL.md excerpt
# 高德地图 JSAPI v2.0 开发技能
本指南包含地图初始化、覆盖物、事件、图层等核心模块的 API 说明和代码示例，旨在帮助开发者快速集成高德地图并遵循正确的使用方式。
## 快速开始
### 1. 引入加载器
使用 script 标签加载 loader.js：
```bash
<script src="https://webapi.amap.com/loader.js"></script>
```
### 2. 安全密钥配置 (强制)
**重要**：自 v2.0 起，必须在加载地图前配置安全密钥，否则无法通过鉴权。详情及后端代理示例请参考 [安全策略](references/security.md)。
```javascript
// 在调用 AMapLoader.load 前执行
window._AMapSecurityConfig = {
securityJsCode: '您的安全密钥', // 开发环境：明文设置
// serviceHost: 'https://your-proxy-domain/_AMapService', // 生产环境：建议使用代理转发
};
```
### 3. 初始化地图
```javascript
import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
key: '您的Web端开发者Key', // 必填
version: '2.0', // 指定版本
plugins: ['AMap.Scale', 'AMap.ToolBar'] // 预加载插件
}).then((AMap) => {
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`, `GLCus...
Related Claw Skills
capt-marbles
phantombuster
Control PhantomBuster automation agents via API. List agents, launch automations, get output/results, check status, and abort running agents. Use when the user needs to run LinkedIn scraping, Twitter automation, lead generation phantoms, or any PhantomBuster workflow.
dgorissen
stormglass-surf-skill
Fetch surf-relevant ocean conditions from Stormglass by spot name or coordinates, including current snapshot and 1-3 day forecast windows with tides, gusts, and water temperature. Use when users ask for surf reports, wave or swell conditions, tide timing, wind, gusts, or water temperature for a beach or surf spot.
coderaven
brain
Personal knowledge base for capturing and retrieving information about people, places, restaurants, games, tech, events, media, ideas, and organizations. Use when: user mentions a person, place, restaurant, landmark, game, device, event, book/show, idea, or company. Trigger phrases: "remember", "note that", "met this person", "visited", "played", "what do I know about", etc. Brain entries take precedence over daily logs for named entities.
cutthemustard
geocode-lookup
Forward/reverse geocoding and great-circle distance calculations.
cotyledonlab
irish-takeaway
Find nearby takeaways in Ireland and browse menus via Deliveroo/Just Eat. Uses Google Places API for discovery and browser automation for menu scraping.
coreyleung-art
baidu-map
使用百度地图Web服务API进行地点搜索、天气查询、路线规划和地理编码。