Rechercher

PythonReactSEOPDF
OpenClaw

amap-jsapi-skill

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

duxiaohuidxh0 installations selon la source☆ 0 Étoiles du dépôtv1.1.0

Installation

Suivez les instructions du dépôt pour votre agent. Consultez les fichiers et dépendances avant l’installation.

SkillHub CLI

skillhub install duxiaohuidxh/amap-jsapi-skill

Examinez la source et la compatibilité, puis suivez les étapes d’installation.

Donnez le lien à votre agent et demandez-lui d’examiner instructions et dépendances avant d’expliquer les étapes.

Voir la source ↗Guides

Instructions

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

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

快速开始

1. 引入加载器

使用 script 标签加载 loader.js:

<script src="https://webapi.amap.com/loader.js"></script>
2. 安全密钥配置 (强制)

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

// 在调用 AMapLoader.load 前执行
window._AMapSecurityConfig = {
  securityJsCode: '您的安全密钥', // 开发环境:明文设置
  // 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) => {
    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...

Informations sur la source

Source
github
Repository
openclaw/skills
Path
skills/duxiaohuidxh/amap-jsapi-skill
Version
1.1.0
Commit
81700c2ced82190abb20270e68ca6cc676e232c4
Source de classification
rules
Statut
active
Visibilité
public

Ces informations proviennent de l’analyse indexée et peuvent être anciennes. Vérifiez les fichiers actuels.

Contenu extrait

SKILL.md
# 高德地图 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...

Skills associés