Xpersona
agentCLAWHUBUnverified

Baidu Map JSAPI GL（百度地图官方 WebGL SKills）

百度地图 JSAPI WebGL (BMapGL)完整开发指南，覆盖地图初始化、覆盖物、图层、事件、样式、性能优化的任务，一站式开发高性能 3D 地图应用。当用户提及 BMapGL、百度地图、jsapi-gl或相关地图开发需求时自动触发。 Skill: Baidu Map JSAPI GL（百度地图官方 WebGL SKills） Summary: 百度地图 JSAPI WebGL (BMapGL)完整开发指南，覆盖地图初始化、覆盖物、图层、事件、样式、性能优化的任务，一站式开发高性能 3D 地图应用。当用户提及 BMapGL、百度地图、jsapi-gl或相关地图开发需求时自动触发。 Tags: latest:1.0.2 Version history: v1.0.2 | 2026-05-12T03:01:17.946Z | user Version 1.0.2 of baidu-map-jsapi-gl - No file changes detected in this release. - Version number updated from 1.0.1 to 1.0.2 with no changes to functionality or docume

OpenClaw
View on ClawHubHomepage

Rank

62

Safety

84

Downloads

1.0k

Updated

Oct 11, 2026

Version

1.0.2

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

  • Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor
Clawhubvendor · observed Oct 11, 2026
Protocol compatibility
OpenClawcompatibility · observed Oct 11, 2026
Adoption signal
1K downloadsadoption · observed Oct 11, 2026
Latest release
1.0.2release · observed May 12, 2026
Handshake status
UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install unknown:baidu-map-jsapi-gl
  1. Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
  2. Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-unknown-baidu-map-jsapi-gl/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

89,613 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: bmap-jsapi-gl
description: 百度地图 JSAPI WebGL (BMapGL)完整开发指南，覆盖地图初始化、覆盖物、图层、事件、样式、性能优化的任务，一站式开发高性能 3D 地图应用。当用户提及 BMapGL、百度地图、jsapi-gl或相关地图开发需求时自动触发。
license: MIT
version: 1.0.1
metadata:
  openclaw:
    requires:
      env: BMAP_JSAPI_KEY
    primaryEnv: BMAP_JSAPI_KEY
---

# JSAPI GL 开发指南

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

## 何时适用

在以下场景中参考这些指南：

- 创建新的地图页面或组件
- 在地图上添加标注、折线、多边形等覆盖物
- 处理地图交互事件（点击、拖拽、缩放等）
- 配置地图样式或切换图层
- 调试地图渲染或性能问题


## 快速参考

### 0. 基础概念

- `references/base-classes.md` - 基础类：Point、Bounds、Size、Pixel、Icon
- `references/constants.md` - 通用常量：搜索状态码、POI 类型

### 1. 地图

- `references/map-init.md` - 地图初始化：资源引入、创建实例、配置选项、交互与视图控制

### 2. 地图覆盖物

- `references/overlay-common.md` - 覆盖物通用操作：添加/移除、显示/隐藏、批量清除
- `references/marker.md` - 点标记：构造参数、位置/图标/旋转/置顶/拖拽方法
- `references/polyline.md` - 折线：构造参数、线条样式、坐标操作、编辑模式
- `references/polygon.md` - 多边形：构造参数、边框/填充样式、带孔多边形、编辑模式
- `references/circle.md` - 圆形：构造参数、中心点/半径、样式设置、编辑模式
- `references/custom-overlay.md` - 自定义覆盖物：DOM 创建、属性传递、事件绑定、旋转控制
- `references/info-window.md` - 信息窗口：构造参数、内容/尺寸设置、最大化、与 Marker 配合使用

### 3. 事件

- `references/map-events.md` - 地图事件：绑定方式、交互事件、视图变化事件、生命周期事件
- `references/overlay-events.md` - 覆盖物事件：通用事件、拖拽事件、矢量图形事件

### 4. 地图样式

- `references/map-style.md` - 个性化地图：自定义地图外观（颜色、显隐），实现深色主题、简洁地图等效果

### 5. 图层服务

- `references/xyz-layer.md` - 第三方图层：加载 XYZ/TMS/WMS/WMTS 标准瓦片
- `references/mvt-layer.md` - 矢量瓦片：加载 MVT/PBF 格式瓦片，支持样式表达式、特征交互、状态管理

### 6. 路径规划

- `references/route-common.md` - 通用配置：构造参数、渲染选项、回调函数、数据结构、状态常量
  - `references/driving-route.md` - 驾车：策略枚举、途经点、路况、收费、拖拽
  - `references/walking-route.md` - 步行：转向类型、拖拽
  - `references/riding-route.md` - 骑行：骑行搜索
  - `references/transit-route.md` - 公交：市内/跨城策略、交通方式、换乘

### 7. 其他LBS服务

- `references/local-search.md` - 本地检索：普通/范围/周边检索、结果处理、翻页、POI 数据结构
- `references/geocoder.md` - 地理编码：正地理编码（地址→坐标）、逆地理编码（坐标→地址）
- `references/convertor.md` - 坐标转换：GPS/高德/谷歌坐标转百度坐标

## 如何使用

请阅读各个参考文件以获取详细说明和代码示例:

```
references/map-init.md
```

每个参考文件包含：

- 功能简要说明
- 完整代码示例及解释
- API 参数说明和注意事项

## 注意事项

- `references/get-ak.md` - 获取密钥（AK）：当用户无 AK 或 AK 失效时，引导用户前往控制台申请浏览器端类型的 AK

_meta.json

{
  "ownerId": "kn778b6bf766ym71fdvrc5yvg98319rv",
  "slug": "baidu-map-jsapi-gl",
  "version": "1.0.2",
  "publishedAt": 1778554877946
}

references/base-classes.md

# 基础类

## Point 坐标点

表示地理坐标点（经纬度）。

### 构造函数

```javascript
new BMapGL.Point(lng, lat)
```

| 参数 | 类型 | 说明 |
|------|------|------|
| lng | number | 经度 |
| lat | number | 纬度 |

### 属性

| 属性 | 类型 | 说明 |
|------|------|------|
| lng | number | 经度 |
| lat | number | 纬度 |

### 方法

| 方法 | 返回值 | 说明 |
|------|--------|------|
| `equals(other)` | boolean | 判断两个坐标点是否相等 |

### 示例

```javascript
// 创建坐标点（BD09 经纬度坐标系）
var point = new BMapGL.Point(116.404, 39.915);

// 获取坐标值
console.log(point.lng);  // 116.404
console.log(point.lat);  // 39.915

// 比较两个点
var point2 = new BMapGL.Point(116.404, 39.915);
console.log(point.equals(point2));  // true
```

### 坐标系说明

百度地图 API 使用 **BD09** 坐标系（百度坐标系）。如果数据是其他坐标系（如 WGS84、GCJ02），需要先进行坐标转换。

## Bounds 地理范围

表示地理矩形区域。

### 构造函数

```javascript
new BMapGL.Bounds(sw, ne)
```

| 参数 | 类型 | 说明 |
|------|------|------|
| sw | Point | 西南角坐标 |
| ne | Point | 东北角坐标 |

### 方法

| 方法 | 返回值 | 说明 |
|------|--------|------|
| `getSouthWest()` | Point | 获取西南角坐标 |
| `getNorthEast()` | Point | 获取东北角坐标 |
| `getCenter()` | Point | 获取中心点坐标 |
| `containsPoint(point)` | boolean | 判断点是否在范围内 |
| `extend(point)` | void | 扩展范围以包含指定点 |

### 示例

```javascript
// 创建地理范围
var sw = new BMapGL.Point(116.3, 39.8);
var ne = new BMapGL.Point(116.5, 40.0);
var bounds = new BMapGL.Bounds(sw, ne);

// 获取中心点
var center = bounds.getCenter();

// 判断点是否在范围内
var point = new BMapGL.Point(116.4, 39.9);
console.log(bounds.containsPoint(point));  // true

// 获取当前地图视野范围
var mapBounds = map.getBounds();
```

## Size 尺寸

表示像素尺寸。

### 构造函数

```javascript
new BMapGL.Size(width, height)
```

| 参数 | 类型 | 说明 |
|------|------|------|
| width | number | 宽度（像素） |
| height | number | 高度（像素） |

### 属性

| 属性 | 类型 | 说明 |
|------|------|------|
| width | number | 宽度 |
| height | number | 高度 |

### 示例

```javascript
// 创建尺寸
var size = new BMapGL.Size(100, 80);

// 获取地图容器尺寸
var containerSize = map.getContainerSize();
console.log(containerSize.width, containerSize.height);
```

## Pixel 像素坐标

表示像素坐标点。

### 构造函数

```javascript
new BMapGL.Pixel(x, y)
```

| 参数 | 类型 | 说明 |
|------|------|------|
| x | number | X 坐标（像素） |
| y | number | Y 坐标（像素） |

### 属性

| 属性 | 类型 | 说明 |
|------|------|------|
| x | number | X 坐标 |
| y | number | Y 坐标 |

### 示例

```javascript
// 在事件对象中获取像素坐标
map.addEventListener('click', function(e) {
    console.log('像素坐标:', e.pixel.x, e.pixel.y);
    console.log('经纬度:', e.latlng.lng, e.latlng.lat);
});

// 像素坐标与经纬度转换
var point = map.pixelToPoint(new BMapGL.Pixel(100, 100));
var pixel = map.pointToPixel(new BMapGL.Point(116.404, 39.915));
```

## Icon 图标

表示标注覆盖物所使用的图标。

### 构造函数

```javascript
new BMapGL.Icon(image, size, options)
```

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| image | string/Canvas/Image | - | 图片 URL 或 DOM |
| size | Size | - | 显示尺寸 |
| options.anchor | Size | 图标中心 | 定位点偏移 |
| options.imageOffset | Size | `new Size(0, 0)` | 图片偏移 (雪碧图) |
| options.imageSize | Size | 原始尺寸 | 图片尺寸 (2x 图需设置) |

### 方法

| 方法 | 说明 |
|------|------|
| `setImageUrl(ur

references/circle.md

# Circle 圆形

## 快速开始

```javascript
var center = new BMapGL.Point(116.404, 39.915);
var circle = new BMapGL.Circle(center, 1000, {
    strokeColor: '#3366FF',
    strokeWeight: 2,
    fillColor: '#3366FF',
    fillOpacity: 0.3
});
map.addOverlay(circle);
```

## 构造函数

```javascript
new BMapGL.Circle(center, radius, options)
```

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| center | Point | - | 圆心坐标 (必需) |
| radius | number | - | 半径，单位：米 (必需) |
| options | Object | - | 配置参数 |

### options 参数

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| strokeColor | string | `'#000'` | 边框颜色，支持 '#xxxxxx'、'red'、'rgb(?,?,?)' |
| strokeWeight | number | `2` | 边框宽度，单位像素 |
| strokeOpacity | number | `1` | 边框透明度，取值范围 0-1 |
| strokeStyle | string | `'solid'` | 边框样式：'solid'(实线)、'dashed'(虚线)、'dotted'(点线) |
| fillColor | string | `'#fff'` | 填充颜色 |
| fillOpacity | number | `0.6` | 填充透明度，取值范围 0-1 |
| enableMassClear | boolean | `true` | 调用 map.clearOverlays() 时是否被清除 |
| enableEditing | boolean | `false` | 是否开启可编辑模式 |
| zIndex | number | `0` | 层级 |

## 方法

### 中心点

```javascript
// 设置圆心
circle.setCenter(new BMapGL.Point(116.410, 39.920));

// 获取圆心
var center = circle.getCenter();  // 返回 Point
```

### 半径

```javascript
// 设置半径（单位：米）
circle.setRadius(2000);

// 获取半径
var radius = circle.getRadius();  // 返回 number
```

### 边框样式

```javascript
// 颜色
circle.setStrokeColor('#FF0000');
var color = circle.getStrokeColor();

// 宽度
circle.setStrokeWeight(3);
var weight = circle.getStrokeWeight();

// 透明度
circle.setStrokeOpacity(0.8);
var opacity = circle.getStrokeOpacity();

// 线型
circle.setStrokeStyle('dashed');
var style = circle.getStrokeStyle();
```

### 填充样式

```javascript
// 填充颜色
circle.setFillColor('#00FF00');
var fillColor = circle.getFillColor();

// 填充透明度
circle.setFillOpacity(0.5);
var fillOpacity = circle.getFillOpacity();
```

### 几何信息

```javascript
// 获取圆形的地理范围（外接矩形）
var bounds = circle.getBounds();  // 返回 Bounds

// 获取近似圆周长（墨卡托单位，非实际距离），返回的是近似圆的多边形边界点连线长度，不是数学圆周长 2πr
var length = circle.getLength();

// 获取近似圆的边界路径点
var path = circle.getPath();  // 返回 Array<Point>，约40个点
```

### 显示隐藏

```javascript
circle.show();   // 显示
circle.hide();   // 隐藏
```

### 编辑

编辑模式下有两个控制点：
- 中心点：拖拽移动圆形
- 圆周点：拖拽改变半径

```javascript
circle.enableEditing();   // 开启编辑模式
circle.disableEditing();  // 关闭编辑模式
```

### 批量配置

```javascript
circle.setOptions({
    strokeColor: '#FF6600',
    fillColor: '#FF6600',
    fillOpacity: 0.4
});
```

## 常见场景

### 可编辑圆形

```javascript
var circle = new BMapGL.Circle(center, 1000, {
    enableEditing: true
});

map.addOverlay(circle);

// 监听编辑完成事件
circle.addEventListener('lineupdate', function(e) {
    var overlay = e.overlay;
    console.log('新圆心:', overlay.getCenter());
    console.log('新半径:', overlay.getRadius(), '米');
});
```

references/constants.md

# 通用常量

## 搜索状态常量

所有 LBS 服务（LocalSearch、Geocoder、路径规划等）共用的状态码。

| 常量 | 值 | 说明 |
|------|-----|------|
| BMAP_STATUS_SUCCESS | 0 | 检索成功 |
| BMAP_STATUS_CITY_LIST | 1 | 返回城市列表（需选择城市后重新检索） |
| BMAP_STATUS_UNKNOWN_LOCATION | 2 | 位置未知 |
| BMAP_STATUS_UNKNOWN_ROUTE | 3 | 路线未知/无法规划 |
| BMAP_STATUS_INVALID_KEY | 4 | 非法密钥 |
| BMAP_STATUS_INVALID_REQUEST | 5 | 非法请求 |
| BMAP_STATUS_PERMISSION_DENIED | 6 | 没有权限 |
| BMAP_STATUS_SERVICE_UNAVAILABLE | 7 | 服务不可用 |
| BMAP_STATUS_TIMEOUT | 8 | 超时 |

## POI 类型常量

| 常量 | 值 | 说明 |
|------|-----|------|
| BMAP_POI_TYPE_NORMAL | 0 | 普通 POI |
| BMAP_POI_TYPE_BUSSTOP | 1 | 公交站 |
| BMAP_POI_TYPE_SUBSTOP | 2 | 地铁站 |

Related agents

Same protocol, similar job.

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW
Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW
Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW
Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "vendor",
      "category": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "href": "https://clawhub.ai/unknown/skills/baidu-map-jsapi-gl",
      "sourceUrl": "https://clawhub.ai/unknown/skills/baidu-map-jsapi-gl",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T17:56:47.815Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-unknown-baidu-map-jsapi-gl/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-unknown-baidu-map-jsapi-gl/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-11T17:56:47.815Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "1K downloads",
      "href": "https://clawhub.ai/unknown/baidu-map-jsapi-gl",
      "sourceUrl": "https://clawhub.ai/unknown/baidu-map-jsapi-gl",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T17:56:47.815Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "1.0.2",
      "href": "https://clawhub.ai/unknown/baidu-map-jsapi-gl",
      "sourceUrl": "https://clawhub.ai/unknown/baidu-map-jsapi-gl",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-05-12T03:01:17.946Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-unknown-baidu-map-jsapi-gl/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-unknown-baidu-map-jsapi-gl/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.0.2",
      "description": "Version 1.0.2 of baidu-map-jsapi-gl - No file changes detected in this release. - Version number updated from 1.0.1 to 1.0.2 with no changes to functionality or documentation.",
      "href": "https://clawhub.ai/unknown/baidu-map-jsapi-gl",
      "sourceUrl": "https://clawhub.ai/unknown/baidu-map-jsapi-gl",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-05-12T03:01:17.946Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 11, 2026.

Sponsored

Ads related to Baidu Map JSAPI GL（百度地图官方 WebGL SKills） and adjacent AI workflows.