What makes Baidu Map JSAPI UI Kit（百度地图官方 JSAPI UI-Kit SKills） notable?

1.1K downloads. Trust evidence available

How should Baidu Map JSAPI UI Kit（百度地图官方 JSAPI UI-Kit SKills） be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Baidu Map JSAPI UI Kit（百度地图官方 JSAPI UI-Kit SKills）

百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。 Skill: Baidu Map JSAPI UI Kit（百度地图官方 JSAPI UI-Kit SKills） Owner: baidu-maps Summary: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。 Tags: latest:1.0.5 Version history: v1.0.5 | 2026-05-27T02:29:09.958Z | user Version 1.0.5 - No file changes detected in this release. - Functionality and documentation remain unchanged from the previous version. v

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.1k

Updated

Oct 11, 2026

Version

1.0.5

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.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: 1.1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.5release · observed May 27, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s178nge8tvzzhnan6cc08q0ech84dmtm:baidu-map-jsapi-ui-kit

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
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-baidu-maps-baidu-map-jsapi-ui-kit/snapshot"

Documentation

CLAWHUB

90,422 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: jsapi-ui-kit
description: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。
version: 1.0.1
metadata:
  openclaw:
    requires:
      env: BMAP_JSAPI_KEY
    primaryEnv: BMAP_JSAPI_KEY
---

# 百度地图 jsapi-ui-kit

轻量级百度地图 UI 组件库，提供地点自动补全、地点检索、详情展示和路径规划能力。

## 什么时候使用

- 希望快速集成标准化的地图 UI 组件，无需从零开发
- 需要在地图应用中添加搜索输入框自动补全功能
- 需要在地图应用中添加地点搜索功能
- 需要展示 POI 详情信息（名称、地址、电话等）
- 需要实现驾车路径规划功能（支持多方案、途经点）

## 文档导航

- **[快速开始](references/getting-started.md)** - 安装、引入方式、基础示例
- **[PlaceAutocomplete 地点自动补全](references/place-autocomplete.md)** - 搜索输入框实时建议
- **[PlaceSearch 地点检索](references/place-search.md)** - 关键字/周边/范围检索
- **[PlaceDetail 地点详情](references/place-detail.md)** - POI 详情展示
- **[RoutePlan 路径规划](references/route-plan.md)** - 驾车路径规划（多方案、途经点、导航调起）

## 如何使用

根据用户问题查询文档导航，参考详细文档内容和API设计： 
```
references/getting-started.md
```
每个参考文件包含：

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

## 注意事项

- 必须先加载百度地图 JS API（BMap 或 BMapGL）

_meta.json

{
  "ownerId": "kn778b6bf766ym71fdvrc5yvg98319rv",
  "slug": "baidu-map-jsapi-ui-kit",
  "version": "1.0.5",
  "publishedAt": 1779848949958
}

references/getting-started.md

# 快速开始

## 安装

```bash
npm install @baidumap/jsapi-ui-kit
```

## 引入方式

### ESM 模块

```javascript
import { PlaceSearch, PlaceDetail } from '@baidumap/jsapi-ui-kit';
import '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';
```

### CDN 引入

```html
<link rel="stylesheet" href="https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css">
<script src="https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js"></script>
```

CDN 方式下通过全局变量 `BMapUIKit` 访问组件。

## 前置依赖

使用前需先加载百度地图 JS API：

```html
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK"></script>
```

## 基础示例

```javascript
// 1. 初始化地图
const map = new BMapGL.Map('map-container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);

// 2. 创建检索组件
const search = new BMapUIKit.PlaceSearch('#search-panel', { map });

// 3. 监听事件
search.on('select', (poi) => {
  console.log('选中:', poi.title);
});

// 4. 执行检索
search.search('餐厅');
```

references/place-autocomplete.md

# PlaceAutocomplete 地点自动补全组件

## 构造函数

```typescript
new PlaceAutocomplete(container: string | HTMLElement, options: PlaceAutocompleteOptions)
```

**参数**:

| 参数      | 类型                    | 必填 | 说明                  |
| --------- | ----------------------- | ---- | --------------------- |
| container | `string \| HTMLElement` | 是   | 容器元素或 CSS 选择器 |
| options   | `PlaceAutocompleteOptions` | 是   | 配置选项           |

**PlaceAutocompleteOptions**:

```typescript
interface PlaceAutocompleteOptions {
    map: BMap.Map | BMapGL.Map; // 地图实例（必填）
    placeholder?: string; // 输入框占位符，默认 '搜索地点'
    debounce?: number; // 防抖延迟（毫秒），默认 300
    location?: string; // 检索城市，默认使用地图中心所在城市
    citylimit?: boolean; // 是否严格限制在指定城市内，默认 false
    types?: string; // 结果类型过滤，默认 'all'
    minLength?: number; // 触发检索的最小字符数，默认 1
    showSuggestion?: boolean; // 是否显示下拉建议列表，默认 true
    suggestionCount?: number; // 建议列表最大条数，默认移动端 6 条，PC 端 10 条
}
```

---

## 方法

### search(keyword)

手动触发检索。

```typescript
search(keyword: string): void
```

**参数**:

| 参数    | 类型     | 必填 | 说明       |
| ------- | -------- | ---- | ---------- |
| keyword | `string` | 是   | 检索关键字 |

**示例**:

```javascript
autocomplete.search('百度大厦');
```

---

### setInputValue(value)

设置输入框的值（不触发检索）。

```typescript
setInputValue(value: string): void
```

**参数**:

| 参数  | 类型     | 必填 | 说明     |
| ----- | -------- | ---- | -------- |
| value | `string` | 是   | 输入值   |

**示例**:

```javascript
autocomplete.setInputValue('百度大厦');
```

---

### getInputValue()

获取输入框当前值。

```typescript
getInputValue(): string
```

**返回值**: 当前输入框的值

**示例**:

```javascript
const value = autocomplete.getInputValue();
console.log('当前输入:', value);
```

---

### setLocation(location)

设置检索城市。

```typescript
setLocation(location: string): void
```

**参数**:

| 参数     | 类型     | 必填 | 说明                           |
| -------- | -------- | ---- | ------------------------------ |
| location | `string` | 是   | 城市名称（如 '北京'、'上海'） |

**示例**:

```javascript
autocomplete.setLocation('北京');
```

---

### setCitylimit(citylimit)

设置是否严格限制在指定城市内搜索。

```typescript
setCitylimit(citylimit: boolean): void
```

**参数**:

| 参数      | 类型      | 必填 | 说明         |
| --------- | --------- | ---- | ------------ |
| citylimit | `boolean` | 是   | 是否限制城市 |

**示例**:

```javascript
autocomplete.setCitylimit(true);
```

---

### setTypes(types)

设置结果类型过滤。

```typescript
setTypes(types: string): void
```

**参数**:

| 参数  | 类型     | 必填 | 说明                        |
| ----- | -------- | ---- | --------------------------- |
| types | `string` | 是   | 类型过滤（如 'all'、'bus'） |

**示例**:

```javascript
autocomplete.setTypes('bus');
```

---

### show()

显示下拉列表。

```typescript
show(): void
```

---

### hide()

隐藏下拉列表。

```typescript
hide(): void
```

---

### destroy()

销毁组件，清理 DOM 和事件。

```typescript
destroy(): void
```

---

## 事件

### suggest

实时搜索建议更新时触发。

```typescript
autocomplete.on('suggest', (suggestions: PlaceAutocompleteEventSuggestion[]) => {
    console.log('搜索建议:', suggestio

references/place-detail.md

# PlaceDetail 地点详情组件

## 构造函数

```typescript
new PlaceDetail(container: string | HTMLElement, options: PlaceDetailOptions)
```

**参数**:

| 参数      | 类型                    | 必填 | 说明                  |
| --------- | ----------------------- | ---- | --------------------- |
| container | `string \| HTMLElement` | 是   | 容器元素或 CSS 选择器 |
| options   | `PlaceDetailOptions`    | 是   | 配置选项              |

**PlaceDetailOptions**:

```typescript
interface PlaceDetailOptions {
    map: BMap.Map | BMapGL.Map; // 地图实例（必填）
    theme?: string; // 主题名称，默认 'default'
    layout?: 'default' | 'compact'; // 布局模式，默认 'default'
    display?: PlaceDetailDisplayOptions;
}

interface PlaceDetailDisplayOptions {
    image?: boolean; // 显示图片
    title?: boolean; // 显示标题
    type?: boolean; // 显示类型
    address?: boolean; // 显示地址
    phone?: boolean; // 显示电话
    rating?: boolean; // 显示评分
    openingHours?: boolean; // 显示营业时间
    website?: boolean; // 显示网址
}
```

**布局模式**:

| 值          | 说明                       |
| ----------- | -------------------------- |
| `'default'` | 详细竖向布局，适合侧边栏   |
| `'compact'` | 紧凑横向布局，适合底部面板 |

---

## 方法

### setPlace(uidOrPoi)

加载并展示地点详情。

```typescript
setPlace(uidOrPoi: string | LocalResultPoiType): void
```

**参数**:

| 参数     | 类型                 | 必填 | 说明        |
| -------- | -------------------- | ---- | ----------- |
| uidOrPoi | `string`             | 是   | POI 的 UID  |
| uidOrPoi | `LocalResultPoiType` | 是   | 或 POI 对象 |

**示例**:

```javascript
// 通过 UID 加载（会发起网络请求）
detail.setPlace('abc123uid');

// 通过 POI 对象直接展示（无网络请求）
detail.setPlace({
    name: '天安门',
    address: '北京市东城区',
    point: {lng: 116.404, lat: 39.915},
    tel: '010-12345678',
});
```

---

### clear()

清空详情面板，显示空状态。

```typescript
clear(): void
```

---

### destroy()

销毁组件，清理 DOM 和事件。

```typescript
destroy(): void
```

---

## 事件

### load

详情加载完成时触发。

```typescript
detail.on('load', (data: PlaceDetailEventData) => {
    console.log('详情:', data.title, data.address);
});
```

---

## 类型定义

### PlaceDetailEventData

事件回调参数类型。

```typescript
interface PlaceDetailEventData {
    title: string; // 名称
    address: string; // 地址
    uid?: string; // POI 唯一标识
    point?: {lng: number; lat: number}; // 坐标
    tel?: string; // 电话
}
```

### LocalResultPoiType

传入 `setPlace()` 的 POI 对象类型（来自 BMap API）。

```typescript
// 参考 BMap.LocalResultPoi
interface LocalResultPoiType {
    name?: string;
    title?: string;
    addr?: string;
    address?: string;
    uid?: string;
    point?: {lng: number; lat: number};
    tel?: string;
    // ... 其他字段
}
```

---

## 使用示例

### 基础用法

```javascript
import {PlaceDetail} from '@baidumap/jsapi-ui-kit';

const map = new BMapGL.Map('map');
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);

const detail = new PlaceDetail('#detail-panel', {map});

detail.on('load', (data) => {
    console.log('加载完成:', data.title);
});

// 加载详情
detail.setPlace('poi_uid_string');
```

### 配置显示字段

```javascript
const detail = new PlaceDetail('#panel', {
    map,

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.