{"id":"92c68639-7a5c-4bcc-a3f5-d8f9ad34d1f3","entityType":"agent","slug":"clawhub-baidu-maps-baidu-map-jsapi-ui-kit","name":"Baidu Map JSAPI UI Kit（百度地图官方 JSAPI UI-Kit SKills）","canonicalUrl":"https://www.xpersona.co/agent/clawhub-baidu-maps-baidu-map-jsapi-ui-kit","canonicalPath":"/agent/clawhub-baidu-maps-baidu-map-jsapi-ui-kit","generatedAt":"2026-10-11T15:13:17.226Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T12:50:54.085Z","emptyReason":null},"description":"百度地图官方 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","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s178nge8tvzzhnan6cc08q0ech84dmtm:baidu-map-jsapi-ui-kit","sourceUrl":"https://clawhub.ai/baidu-maps/baidu-map-jsapi-ui-kit","homepage":"https://clawhub.ai/baidu-maps/skills/baidu-map-jsapi-ui-kit","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/baidu-maps/baidu-map-jsapi-ui-kit","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/baidu-maps/skills/baidu-map-jsapi-ui-kit","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。 Skill: Baidu Map JSAPI UI Kit（百度地图官方 JS"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:50:54.085Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:50:54.085Z","emptyReason":null},"stars":null,"forks":null,"downloads":1062,"packageName":null,"latestVersion":"1.0.5","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:50:54.015Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T12:50:54.085Z","lastCrawledAt":"2026-10-11T12:50:54.015Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T12:50:54.015Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.5","createdAt":"2026-05-27T02:29:09.958Z","changelog":"Version 1.0.5 - No file changes detected in this release. - Functionality and documentation remain unchanged from the previous version.","fileCount":8,"zipByteSize":15321},{"version":"1.0.4","createdAt":"2026-04-07T06:36:13.365Z","changelog":"- Updated documentation with detailed usage instructions and component references. - Clarified required environment variable: BMAP_JSAPI_KEY. - Added guidance on when and how to use each UI component (PlaceAutocomplete, PlaceSearch, PlaceDetail, RoutePlan). - Provided direct navigation links to reference documents for easier access.","fileCount":7,"zipByteSize":13707},{"version":"1.0.2","createdAt":"2026-03-13T08:37:51.576Z","changelog":"更新slug name，添加百度地图前缀","fileCount":7,"zipByteSize":13799}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s178nge8tvzzhnan6cc08q0ech84dmtm:baidu-map-jsapi-ui-kit","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T15:13:17.224Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-baidu-maps-baidu-map-jsapi-ui-kit/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T12:50:54.085Z","emptyReason":null},"readme":"Skill: Baidu Map JSAPI UI Kit（百度地图官方 JSAPI UI-Kit SKills）\n\nOwner: baidu-maps\n\nSummary: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。\n\nTags: latest:1.0.5\n\nVersion history:\n\nv1.0.5 | 2026-05-27T02:29:09.958Z | user\n\nVersion 1.0.5\n\n- No file changes detected in this release.\n- Functionality and documentation remain unchanged from the previous version.\n\nv1.0.4 | 2026-04-07T06:36:13.365Z | user\n\n- Updated documentation with detailed usage instructions and component references.\n- Clarified required environment variable: BMAP_JSAPI_KEY.\n- Added guidance on when and how to use each UI component (PlaceAutocomplete, PlaceSearch, PlaceDetail, RoutePlan).\n- Provided direct navigation links to reference documents for easier access.\n\nv1.0.2 | 2026-03-13T08:37:51.576Z | user\n\n更新slug name，添加百度地图前缀\n\nArchive index:\n\nArchive v1.0.5: 8 files, 15321 bytes\n\nFiles: references/getting-started.md (1081b), references/place-autocomplete.md (10754b), references/place-detail.md (4405b), references/place-search.md (4494b), references/route-plan.md (11872b), skill-card.md (2840b), SKILL.md (1736b), _meta.json (141b)\n\nFile v1.0.5:SKILL.md\n\n---\nname: jsapi-ui-kit\ndescription: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。\nversion: 1.0.1\nmetadata:\n  openclaw:\n    requires:\n      env: BMAP_JSAPI_KEY\n    primaryEnv: BMAP_JSAPI_KEY\n---\n\n# 百度地图 jsapi-ui-kit\n\n轻量级百度地图 UI 组件库，提供地点自动补全、地点检索、详情展示和路径规划能力。\n\n## 什么时候使用\n\n- 希望快速集成标准化的地图 UI 组件，无需从零开发\n- 需要在地图应用中添加搜索输入框自动补全功能\n- 需要在地图应用中添加地点搜索功能\n- 需要展示 POI 详情信息（名称、地址、电话等）\n- 需要实现驾车路径规划功能（支持多方案、途经点）\n\n## 文档导航\n\n- **[快速开始](references/getting-started.md)** - 安装、引入方式、基础示例\n- **[PlaceAutocomplete 地点自动补全](references/place-autocomplete.md)** - 搜索输入框实时建议\n- **[PlaceSearch 地点检索](references/place-search.md)** - 关键字/周边/范围检索\n- **[PlaceDetail 地点详情](references/place-detail.md)** - POI 详情展示\n- **[RoutePlan 路径规划](references/route-plan.md)** - 驾车路径规划（多方案、途经点、导航调起）\n\n## 如何使用\n\n根据用户问题查询文档导航，参考详细文档内容和API设计： \n```\nreferences/getting-started.md\n```\n每个参考文件包含：\n\n- 功能简要说明\n- 完整代码示例及解释\n- API 参数说明和注意事项\n\n## 注意事项\n\n- 必须先加载百度地图 JS API（BMap 或 BMapGL）\n\nFile v1.0.5:_meta.json\n\n{\n  \"ownerId\": \"kn778b6bf766ym71fdvrc5yvg98319rv\",\n  \"slug\": \"baidu-map-jsapi-ui-kit\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1779848949958\n}\n\nFile v1.0.5:references/getting-started.md\n\n# 快速开始\n\n## 安装\n\n```bash\nnpm install @baidumap/jsapi-ui-kit\n```\n\n## 引入方式\n\n### ESM 模块\n\n```javascript\nimport { PlaceSearch, PlaceDetail } from '@baidumap/jsapi-ui-kit';\nimport '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';\n```\n\n### CDN 引入\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css\">\n<script src=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js\"></script>\n```\n\nCDN 方式下通过全局变量 `BMapUIKit` 访问组件。\n\n## 前置依赖\n\n使用前需先加载百度地图 JS API：\n\n```html\n<script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n```\n\n## 基础示例\n\n```javascript\n// 1. 初始化地图\nconst map = new BMapGL.Map('map-container');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 2. 创建检索组件\nconst search = new BMapUIKit.PlaceSearch('#search-panel', { map });\n\n// 3. 监听事件\nsearch.on('select', (poi) => {\n  console.log('选中:', poi.title);\n});\n\n// 4. 执行检索\nsearch.search('餐厅');\n```\n\nFile v1.0.5:references/place-autocomplete.md\n\n# PlaceAutocomplete 地点自动补全组件\n\n## 构造函数\n\n```typescript\nnew PlaceAutocomplete(container: string | HTMLElement, options: PlaceAutocompleteOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceAutocompleteOptions` | 是   | 配置选项           |\n\n**PlaceAutocompleteOptions**:\n\n```typescript\ninterface PlaceAutocompleteOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    placeholder?: string; // 输入框占位符，默认 '搜索地点'\n    debounce?: number; // 防抖延迟（毫秒），默认 300\n    location?: string; // 检索城市，默认使用地图中心所在城市\n    citylimit?: boolean; // 是否严格限制在指定城市内，默认 false\n    types?: string; // 结果类型过滤，默认 'all'\n    minLength?: number; // 触发检索的最小字符数，默认 1\n    showSuggestion?: boolean; // 是否显示下拉建议列表，默认 true\n    suggestionCount?: number; // 建议列表最大条数，默认移动端 6 条，PC 端 10 条\n}\n```\n\n---\n\n## 方法\n\n### search(keyword)\n\n手动触发检索。\n\n```typescript\nsearch(keyword: string): void\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明       |\n| ------- | -------- | ---- | ---------- |\n| keyword | `string` | 是   | 检索关键字 |\n\n**示例**:\n\n```javascript\nautocomplete.search('百度大厦');\n```\n\n---\n\n### setInputValue(value)\n\n设置输入框的值（不触发检索）。\n\n```typescript\nsetInputValue(value: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明     |\n| ----- | -------- | ---- | -------- |\n| value | `string` | 是   | 输入值   |\n\n**示例**:\n\n```javascript\nautocomplete.setInputValue('百度大厦');\n```\n\n---\n\n### getInputValue()\n\n获取输入框当前值。\n\n```typescript\ngetInputValue(): string\n```\n\n**返回值**: 当前输入框的值\n\n**示例**:\n\n```javascript\nconst value = autocomplete.getInputValue();\nconsole.log('当前输入:', value);\n```\n\n---\n\n### setLocation(location)\n\n设置检索城市。\n\n```typescript\nsetLocation(location: string): void\n```\n\n**参数**:\n\n| 参数     | 类型     | 必填 | 说明                           |\n| -------- | -------- | ---- | ------------------------------ |\n| location | `string` | 是   | 城市名称（如 '北京'、'上海'） |\n\n**示例**:\n\n```javascript\nautocomplete.setLocation('北京');\n```\n\n---\n\n### setCitylimit(citylimit)\n\n设置是否严格限制在指定城市内搜索。\n\n```typescript\nsetCitylimit(citylimit: boolean): void\n```\n\n**参数**:\n\n| 参数      | 类型      | 必填 | 说明         |\n| --------- | --------- | ---- | ------------ |\n| citylimit | `boolean` | 是   | 是否限制城市 |\n\n**示例**:\n\n```javascript\nautocomplete.setCitylimit(true);\n```\n\n---\n\n### setTypes(types)\n\n设置结果类型过滤。\n\n```typescript\nsetTypes(types: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明                        |\n| ----- | -------- | ---- | --------------------------- |\n| types | `string` | 是   | 类型过滤（如 'all'、'bus'） |\n\n**示例**:\n\n```javascript\nautocomplete.setTypes('bus');\n```\n\n---\n\n### show()\n\n显示下拉列表。\n\n```typescript\nshow(): void\n```\n\n---\n\n### hide()\n\n隐藏下拉列表。\n\n```typescript\nhide(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### suggest\n\n实时搜索建议更新时触发。\n\n```typescript\nautocomplete.on('suggest', (suggestions: PlaceAutocompleteEventSuggestion[]) => {\n    console.log('搜索建议:', suggestions);\n});\n```\n\n**回调参数**: `PlaceAutocompleteEventSuggestion[]` - 建议列表\n\n---\n\n### select\n\n用户选中某个建议时触发。\n\n```typescript\nautocomplete.on('select', (suggestion: PlaceAutocompleteEventSuggestion) => {\n    console.log('选中:', suggestion);\n\n    // 通常在 select 事件中触发 PlaceSearch 检索\n    if (suggestion.point) {\n        search.searchNearby(suggestion.name, suggestion.point, 1000);\n    } else {\n        search.search(suggestion.name);\n    }\n});\n```\n\n**回调参数**: `PlaceAutocompleteEventSuggestion` - 选中的建议项\n\n**典型使用场景**:\n- 将选中的地点传递给 `PlaceSearch` 组件进行详细检索\n- 在地图上添加标记\n- 更新地图中心点\n\n---\n\n### highlight\n\n用户通过键盘上下键切换高亮项时触发。\n\n```typescript\nautocomplete.on('highlight', (event: { from: HighlightItem | null, to: HighlightItem }) => {\n    console.log('高亮切换:', event);\n});\n```\n\n**回调参数**: 包含 `from`（上一个高亮项）和 `to`（当前高亮项）的对象\n\n---\n\n## 类型定义\n\n### PlaceAutocompleteEventSuggestion\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceAutocompleteEventSuggestion {\n    province: string; // 省份\n    city: string; // 城市\n    district: string; // 区县\n    name: string; // POI 名称（如\"京酱肉丝\"、\"百度大厦\"）\n    street: string; // @deprecated 使用 name 字段代替，为兼容旧版保留\n    business: string; // 商圈\n    address: string; // 地址\n    tag?: string; // 标签\n    point?: BMapGL.Point; // 坐标（部分建议可能没有坐标）\n    uid?: string; // POI 唯一标识\n}\n```\n\n### HighlightItem\n\n高亮切换事件数据。\n\n```typescript\ninterface HighlightItem {\n    index: number; // 高亮项在列表中的索引\n    value: PlaceAutocompleteEventSuggestion; // 高亮项数据\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport BMapUIKit from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n\n// 创建自动补全组件\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    placeholder: '搜索地点',\n    location: '北京',\n    citylimit: false,\n});\n\n// 监听建议更新\nautocomplete.on('suggest', suggestions => {\n    console.log('搜索建议:', suggestions);\n});\n\n// 监听用户选中\nautocomplete.on('select', suggestion => {\n    console.log('选中:', suggestion);\n});\n```\n\n---\n\n### 与 PlaceSearch 联动\n\n```javascript\nimport BMapUIKit from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n\n// 自动补全组件\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    placeholder: '搜索地点',\n    debounce: 300,\n    location: '北京',\n});\n\n// 搜索结果展示组件\nconst search = new BMapUIKit.PlaceSearch('#search-results', {\n    map,\n    pageCapacity: 10,\n});\n\n// 详情展示组件\nconst detail = new BMapUIKit.PlaceDetail('#detail-panel', {\n    map,\n});\n\n// 选中建议后触发搜索\nautocomplete.on('select', suggestion => {\n    if (!suggestion) return;\n\n    // 构建搜索关键词\n    const keyword = suggestion.name || suggestion.address || autocomplete.getInputValue();\n\n    if (suggestion.point) {\n        // 如果有坐标，使用周边搜索\n        search.searchNearby(keyword, suggestion.point, 1000);\n    } else {\n        // 否则使用关键词搜索\n        search.search(keyword);\n    }\n});\n\n// 搜索结果选中后展示详情\nsearch.on('select', poi => {\n    if (poi && poi.uid) {\n        detail.setPlace(poi.uid);\n    }\n});\n```\n\n---\n\n### 动态切换城市\n\n```javascript\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    location: '北京',\n    citylimit: false,\n});\n\n// 切换搜索城市\ndocument.getElementById('city-select').addEventListener('change', (e) => {\n    const city = e.target.value;\n    autocomplete.setLocation(city);\n\n    // 同步移动地图到对应城市\n    const cityCenters = {\n        '北京': [116.404, 39.915],\n        '上海': [121.473, 31.230],\n        '广州': [113.264, 23.129],\n    };\n    const coords = cityCenters[city];\n    if (coords) {\n        map.centerAndZoom(new BMapGL.Point(coords[0], coords[1]), 14);\n    }\n});\n\n// 切换城市限制\ndocument.getElementById('citylimit-check').addEventListener('change', (e) => {\n    autocomplete.setCitylimit(e.target.checked);\n});\n```\n\n---\n\n### 键盘导航支持\n\nPlaceAutocomplete 组件内置了完整的键盘导航支持：\n\n- **↓ (ArrowDown)**: 向下选择建议项\n- **↑ (ArrowUp)**: 向上选择建议项\n- **Enter**: 确认选中当前高亮的建议项\n- **Escape**: 关闭下拉列表\n\n```javascript\nautocomplete.on('highlight', ({ from, to }) => {\n    console.log(`高亮从 ${from?.index} 切换到 ${to.index}`);\n    console.log('当前高亮项:', to.value.name);\n});\n\nautocomplete.on('select', suggestion => {\n    console.log('用户确认选中:', suggestion.name);\n});\n```\n\n---\n\n## 完整示例 HTML\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <title>PlaceAutocomplete 示例</title>\n  <style>\n    #map { width: 100%; height: 500px; }\n    #autocomplete-container { width: 300px; margin: 20px; }\n  </style>\n</head>\n<body>\n  <div id=\"autocomplete-container\"></div>\n  <div id=\"map\"></div>\n\n  <script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n  <script type=\"module\">\n    import BMapUIKit from '@baidumap/jsapi-ui-kit';\n\n    const map = new BMapGL.Map('map');\n    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n    map.enableScrollWheelZoom(true);\n\n    const autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n        map,\n        placeholder: '搜索地点',\n        location: '北京',\n    });\n\n    autocomplete.on('select', suggestion => {\n        console.log('选中:', suggestion);\n        if (suggestion.point) {\n            map.centerAndZoom(suggestion.point, 16);\n            const marker = new BMapGL.Marker(suggestion.point);\n            map.addOverlay(marker);\n        }\n    });\n  </script>\n</body>\n</html>\n```\n\n---\n\n## 注意事项\n\n1. **必须先加载百度地图 API**: 确保在使用组件前已加载 BMap 或 BMapGL\n2. **防抖优化**: 默认 300ms 防抖延迟，避免频繁请求。可通过 `debounce` 参数调整\n3. **移动端适配**: 组件会自动检测设备类型，移动端建议列表默认显示 6 条，PC 端 10 条\n4. **城市设置**:\n   - `location` 为空时，使用地图中心所在城市\n   - `citylimit: true` 时，严格限制在指定城市内搜索\n5. **坐标可用性**: 并非所有建议都包含坐标（`point`），使用前需判断\n6. **与 PlaceSearch 联动**: 选中建议后通常需要触发 PlaceSearch 进行详细检索\n7. **内存管理**: 组件销毁时会自动清理所有事件监听器和 DOM 元素\n\nFile v1.0.5:references/place-detail.md\n\n# PlaceDetail 地点详情组件\n\n## 构造函数\n\n```typescript\nnew PlaceDetail(container: string | HTMLElement, options: PlaceDetailOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceDetailOptions`    | 是   | 配置选项              |\n\n**PlaceDetailOptions**:\n\n```typescript\ninterface PlaceDetailOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    layout?: 'default' | 'compact'; // 布局模式，默认 'default'\n    display?: PlaceDetailDisplayOptions;\n}\n\ninterface PlaceDetailDisplayOptions {\n    image?: boolean; // 显示图片\n    title?: boolean; // 显示标题\n    type?: boolean; // 显示类型\n    address?: boolean; // 显示地址\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n    website?: boolean; // 显示网址\n}\n```\n\n**布局模式**:\n\n| 值          | 说明                       |\n| ----------- | -------------------------- |\n| `'default'` | 详细竖向布局，适合侧边栏   |\n| `'compact'` | 紧凑横向布局，适合底部面板 |\n\n---\n\n## 方法\n\n### setPlace(uidOrPoi)\n\n加载并展示地点详情。\n\n```typescript\nsetPlace(uidOrPoi: string | LocalResultPoiType): void\n```\n\n**参数**:\n\n| 参数     | 类型                 | 必填 | 说明        |\n| -------- | -------------------- | ---- | ----------- |\n| uidOrPoi | `string`             | 是   | POI 的 UID  |\n| uidOrPoi | `LocalResultPoiType` | 是   | 或 POI 对象 |\n\n**示例**:\n\n```javascript\n// 通过 UID 加载（会发起网络请求）\ndetail.setPlace('abc123uid');\n\n// 通过 POI 对象直接展示（无网络请求）\ndetail.setPlace({\n    name: '天安门',\n    address: '北京市东城区',\n    point: {lng: 116.404, lat: 39.915},\n    tel: '010-12345678',\n});\n```\n\n---\n\n### clear()\n\n清空详情面板，显示空状态。\n\n```typescript\nclear(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n详情加载完成时触发。\n\n```typescript\ndetail.on('load', (data: PlaceDetailEventData) => {\n    console.log('详情:', data.title, data.address);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceDetailEventData\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceDetailEventData {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: {lng: number; lat: number}; // 坐标\n    tel?: string; // 电话\n}\n```\n\n### LocalResultPoiType\n\n传入 `setPlace()` 的 POI 对象类型（来自 BMap API）。\n\n```typescript\n// 参考 BMap.LocalResultPoi\ninterface LocalResultPoiType {\n    name?: string;\n    title?: string;\n    addr?: string;\n    address?: string;\n    uid?: string;\n    point?: {lng: number; lat: number};\n    tel?: string;\n    // ... 其他字段\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst detail = new PlaceDetail('#detail-panel', {map});\n\ndetail.on('load', (data) => {\n    console.log('加载完成:', data.title);\n});\n\n// 加载详情\ndetail.setPlace('poi_uid_string');\n```\n\n### 配置显示字段\n\n```javascript\nconst detail = new PlaceDetail('#panel', {\n    map,\n    layout: 'compact',\n    display: {\n        image: true,\n        title: true,\n        address: true,\n        phone: true,\n        rating: false,\n        website: false,\n    },\n});\n```\n\n### 与 PlaceSearch 联动\n\n```javascript\nimport {PlaceSearch, PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst search = new PlaceSearch('#search', {map});\nconst detail = new PlaceDetail('#detail', {map});\n\n// 点击搜索结果时展示详情\nsearch.on('select', (poi) => {\n    if (poi.uid) {\n        detail.setPlace(poi.uid);\n    } else {\n        // 没有 UID 时直接展示已有信息\n        detail.setPlace(poi);\n    }\n});\n```\n\n### 动态切换布局\n\n```javascript\n// 根据屏幕宽度选择布局\nconst layout = window.innerWidth < 768 ? 'compact' : 'default';\nconst detail = new PlaceDetail('#panel', {map, layout});\n```\n\nFile v1.0.5:references/place-search.md\n\n# PlaceSearch 地点检索组件\n\n## 构造函数\n\n```typescript\nnew PlaceSearch(container: string | HTMLElement, options: PlaceSearchOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceSearchOptions`    | 是   | 配置选项              |\n\n**PlaceSearchOptions**:\n\n```typescript\ninterface PlaceSearchOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    pageCapacity?: number; // 每页结果条数，默认 10\n    pageNum?: number; // 页码，默认 0\n    display?: PlaceSearchDisplayOptions;\n}\n\ninterface PlaceSearchDisplayOptions {\n    title?: boolean; // 显示标题\n    address?: boolean; // 显示地址\n    type?: boolean; // 显示类型\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n}\n```\n\n---\n\n## 方法\n\n### search(keyword, option?)\n\n关键字检索。\n\n```typescript\nsearch(keyword: string, option?: { city?: string }): Promise<void>\n```\n\n**参数**:\n\n| 参数        | 类型     | 必填 | 说明             |\n| ----------- | -------- | ---- | ---------------- |\n| keyword     | `string` | 是   | 检索关键字       |\n| option.city | `string` | 否   | 城市名称（预留） |\n\n**示例**:\n\n```javascript\nawait search.search('餐厅');\nawait search.search('咖啡', {city: '北京'});\n```\n\n---\n\n### searchNearby(keyword, center, radius?)\n\n周边检索。\n\n```typescript\nsearchNearby(\n  keyword: string,\n  center: BMap.Point | BMapGL.Point,\n  radius?: number\n): Promise<void>\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明                  |\n| ------- | -------- | ---- | --------------------- |\n| keyword | `string` | 是   | 检索关键字            |\n| center  | `Point`  | 是   | 圆心坐标              |\n| radius  | `number` | 否   | 半径（米），默认 2000 |\n\n**示例**:\n\n```javascript\nconst center = new BMapGL.Point(116.404, 39.915);\nawait search.searchNearby('酒店', center, 1000);\n```\n\n---\n\n### searchInBounds(keyword, bounds)\n\n范围检索。\n\n```typescript\nsearchInBounds(\n  keyword: string,\n  bounds: { sw: BMapGL.Point, ne: BMapGL.Point }\n): Promise<void>\n```\n\n**参数**:\n\n| 参数      | 类型     | 必填 | 说明       |\n| --------- | -------- | ---- | ---------- |\n| keyword   | `string` | 是   | 检索关键字 |\n| bounds    | `object` | 是   | 矩形范围   |\n| bounds.sw | `Point`  | 是   | 西南角坐标 |\n| bounds.ne | `Point`  | 是   | 东北角坐标 |\n\n**示例**:\n\n```javascript\nawait search.searchInBounds('商场', {\n    sw: new BMapGL.Point(116.3, 39.8),\n    ne: new BMapGL.Point(116.5, 40.0),\n});\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n检索完成时触发。\n\n```typescript\nsearch.on('load', (list: PlaceSearchEventPoi[]) => {\n    console.log('检索结果:', list);\n});\n```\n\n### select\n\n用户点击列表项时触发。\n\n```typescript\nsearch.on('select', (poi: PlaceSearchEventPoi) => {\n    console.log('选中:', poi.title, poi.point);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceSearchEventPoi\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceSearchEventPoi {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: BMapGL.Point; // 坐标\n    tel?: string; // 电话\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceSearch} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst search = new PlaceSearch('#search-panel', {map});\n\nsearch.on('load', (list) => {\n    console.log(`共 ${list.length} 条结果`);\n});\n\nsearch.on('select', (poi) => {\n    map.centerAndZoom(poi.point, 16);\n});\n\nsearch.search('美食');\n```\n\n### 配置显示字段\n\n```javascript\nconst search = new PlaceSearch('#panel', {\n    map,\n    pageCapacity: 5,\n    display: {\n        title: true,\n        address: true,\n        phone: true,\n        rating: false,\n        openingHours: false,\n    },\n});\n```\n\n### 周边检索联动\n\n```javascript\n// 点击地图时，在点击位置周边检索\nmap.addEventListener('click', (e) => {\n    search.searchNearby('餐厅', e.latlng, 500);\n});\n```\n\nFile v1.0.5:references/route-plan.md\n\n# RoutePlan 路径规划组件\n\n路径规划 UI 组件，封装百度地图路径规划服务，提供统一的 API 和归一化的数据格式。\n\n> **注意**: 目前仅开放**驾车**路径规划功能。公交、骑行、步行等后续会陆续开放。\n\n## 构造函数\n\n```typescript\nnew RoutePlan(container: string | HTMLElement, options: RoutePlanOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `RoutePlanOptions`      | 是   | 配置选项              |\n\n**RoutePlanOptions**:\n\n```typescript\ninterface RoutePlanOptions {\n    /** 地图实例，必传 */\n    map: BMap.Map | BMapGL.Map;\n    /** 驾车配置 */\n    drivingOptions?: DrivingOptions;\n}\n\ninterface DrivingOptions {\n    /** 驾车策略，默认 DEFAULT (0) */\n    policy?: DrivingPolicy;\n    /** 是否返回备选路线：0-返回一条推荐路线，1-返回1-3条路线供选择，默认 0 */\n    alternatives?: 0 | 1;\n}\n```\n\n\n## 导入方式\n\n```typescript\nimport {\n    RoutePlan,\n    DrivingPolicy,\n    // 以下暂未开放\n    TransitPolicy,\n    IntercityPolicy,\n    TransitTypePolicy,\n    LineType,\n} from '@baidumap/jsapi-ui-kit';\n\n// 类型导入\nimport type {\n    RoutePlanOptions,\n    RoutePlanType,\n    RoutePlanSearchOptions,\n    RoutePlanEventData,\n    NormalizedRouteResult,\n    NormalizedPlan,\n    NormalizedPoint,\n    NormalizedLocation,\n    Segment,\n    DriveSegment,\n} from '@baidumap/jsapi-ui-kit';\n```\n\n## 驾车策略枚举\n\n```typescript\nenum DrivingPolicy {\n    DEFAULT = 0,                        // 默认策略\n    LEAST_DISTANCE = 2,                 // 距离最短（不考虑限行和路况，用于估价场景）\n    AVOID_HIGHWAYS = 3,                 // 不走高速\n    FIRST_HIGHWAYS = 4,                 // 高速优先\n    AVOID_CONGESTION = 5,               // 躲避拥堵\n    AVOID_PAY = 6,                      // 少收费\n    HIGHWAYS_AVOID_CONGESTION = 7,      // 高速优先+躲避拥堵\n    AVOID_HIGHWAYS_CONGESTION = 8,      // 不走高速+躲避拥堵\n    AVOID_CONGESTION_PAY = 9,           // 躲避拥堵+少收费\n    AVOID_HIGHWAYS_CONGESTION_PAY = 10, // 不走高速+躲避拥堵+少收费\n    AVOID_HIGHWAYS_PAY = 11,            // 不走高速+少收费\n    DISTANCE_PRIORITY = 12,             // 距离优先（考虑限行和路况，距离相对短但不一定稳定）\n    TIME_PRIORITY = 13,                 // 时间优先\n}\n```\n\n\n## 方法\n\n### search(searchOptions)\n\n发起路径规划搜索。\n\n```typescript\nsearch(searchOptions: RoutePlanSearchOptions): Promise<NormalizedRouteResult>\n```\n\n**RoutePlanSearchOptions**:\n\n| 参数      | 类型              | 必填 | 说明                                   |\n| --------- | ----------------- | ---- | -------------------------------------- |\n| start     | `Point`           | 是   | 起点坐标                               |\n| end       | `Point`           | 是   | 终点坐标                               |\n| startName | `string`          | 否   | 起点名称（用于外部导航展示）           |\n| endName   | `string`          | 否   | 终点名称（用于外部导航展示）           |\n| startUid  | `string`          | 否   | 起点POI的UID，填写后将提升路线规划的准确性 |\n| endUid    | `string`          | 否   | 终点POI的UID，填写后将提升路线规划的准确性 |\n| waypoints | `Point[]`         | 否   | 途经点数组（驾车最多 10 个）           |\n\n**示例**:\n\n```javascript\n// 基础用法\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n});\n\n// 带途经点\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n    waypoints: [\n        new BMapGL.Point(116.35, 39.95),\n    ],\n});\n\n// 带UID提升准确性\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n    startUid: 'xxx',\n    endUid: 'yyy',\n});\n\n// 填写起终点名称\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    startName: '北京西站',\n    startUid: 'xxx',\n    end: new BMapGL.Point(116.305, 39.982),\n    endName: '西直门',\n    endUid: 'yyy',\n});\n```\n\n### clear()\n\n清空搜索结果和地图覆盖物。\n\n```typescript\nclear(): void\n```\n\n### getCurrentType()\n\n获取当前路径规划类型。\n\n```typescript\ngetCurrentType(): RoutePlanType\n```\n\n**返回值**: `'driving'` | `'transit'` | `'riding'` | `'walking'`\n\n### getLastResult()\n\n获取上次搜索的归一化结果。\n\n```typescript\ngetLastResult(): NormalizedRouteResult | null\n```\n\n### destroy()\n\n销毁组件，清理 DOM、事件和地图覆盖物。\n\n```typescript\ndestroy(): void\n```\n\n\n### on(event, handler)\n\n注册事件监听。\n\n```typescript\non(event: string, handler: Function): this\n```\n\n\n### off(event, handler?)\n\n移除事件监听。\n\n```typescript\noff(event: string, handler?: Function): this\n```\n\n\n## 事件\n\n| 事件名      | 触发时机               | 回调参数                                    |\n| ----------- | ---------------------- | ------------------------------------------- |\n| `result`    | 搜索成功               | `RoutePlanEventData`                        |\n| `error`     | 搜索失败               | `Error`                                     |\n| `typechange`| 路径类型切换           | `{ type: RoutePlanType }`                   |\n| `planselect`| 方案选中（展开详情）   | `{ type, planIndex, plan }`                 |\n| `clear`     | 清空结果               | 无                                          |\n| `navclick`  | 点击\"开始导航\"按钮     | `{ type, result, planIndex, plan }`         |\n\n**示例**:\n\n```javascript\n// 监听搜索结果\nroutePlan.on('result', (data) => {\n    console.log('起点:', data.start.title);\n    console.log('终点:', data.end.title);\n    console.log('方案数量:', data.plans.length);\n});\n\n// 监听错误\nroutePlan.on('error', (err) => {\n    console.error('路径规划失败:', err.message);\n});\n\n// 监听方案切换\nroutePlan.on('planselect', (data) => {\n    console.log('选中方案:', data.planIndex);\n    console.log('距离:', data.plan.distanceText);\n    console.log('时长:', data.plan.durationText);\n});\n\n// 监听导航调起\nroutePlan.on('navclick', (data) => {\n    // 可在此处理跳转百度地图 App 进行导航\n    console.log('调起导航', data);\n});\n```\n\n\n## 类型定义\n\n### RoutePlanEventData\n\n```typescript\ninterface RoutePlanEventData {\n    /** 路径规划类型 */\n    type: RoutePlanType;\n    /** 起点信息 */\n    start: NormalizedPoint;\n    /** 终点信息 */\n    end: NormalizedPoint;\n    /** 方案数组 */\n    plans: NormalizedPlan[];\n}\n```\n\n### NormalizedRouteResult\n\n```typescript\ninterface NormalizedRouteResult {\n    /** 路径规划类型 */\n    routeType: RoutePlanType;\n    /** 起点信息 */\n    start: NormalizedPoint;\n    /** 终点信息 */\n    end: NormalizedPoint;\n    /** 方案数组 */\n    plans: NormalizedPlan[];\n}\n```\n\n### NormalizedPlan\n\n```typescript\ninterface NormalizedPlan {\n    /** 总距离（米） */\n    distance: number;\n    /** 距离文本 */\n    distanceText: string;\n    /** 总时长（秒） */\n    duration: number;\n    /** 时长文本 */\n    durationText: string;\n    /** 路段数组 */\n    segments: Segment[];\n\n    // 驾车特有字段\n    /** 过路费（元） */\n    toll?: number;\n    /** 收费路段距离（米） */\n    tollDistance?: number;\n    /** 红绿灯个数 */\n    trafficLights?: number;\n    /** 路况/方案特点摘要，如「一路畅通|时间少」 */\n    tag?: string;\n    /** 途经点数组 */\n    waypoints?: string[];\n    /** 完整路径坐标点 */\n    path?: NormalizedLocation[];\n}\n```\n\n### NormalizedPoint\n\n```typescript\ninterface NormalizedPoint {\n    /** 地点名称 */\n    title: string;\n    /** 坐标位置 */\n    location: NormalizedLocation;\n    /** 所属城市 */\n    city?: string;\n    /** UID */\n    uid?: string;\n}\n```\n\n### NormalizedLocation\n\n```typescript\ninterface NormalizedLocation {\n    /** 经度 */\n    lng: number;\n    /** 纬度 */\n    lat: number;\n}\n```\n\n### DriveSegment\n\n```typescript\ninterface DriveSegment extends BaseSegment {\n    type: 'drive';\n    /** 路段描述 */\n    description: string;\n    /** 起点位置 */\n    location: NormalizedLocation;\n    /** 道路名称 */\n    roadName?: string;\n    /** 行驶时长（秒） */\n    duration?: number;\n}\n```\n\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport { RoutePlan, DrivingPolicy } from '@baidumap/jsapi-ui-kit';\n\n// 初始化地图\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 创建路径规划组件\nconst routePlan = new RoutePlan('#route-panel', {\n    map: map,\n    drivingOptions: {\n        policy: DrivingPolicy.AVOID_CONGESTION,\n        alternatives: 1,  // 返回 1-3 条备选路线\n    },\n});\n\n// 发起搜索\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n});\n```\n\n### 配合地点搜索组件使用\n\n```javascript\nimport { RoutePlan, PlaceAutocomplete, PlaceSearch } from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 起点输入框\nconst startInput = new PlaceAutocomplete('#start-input', { map });\n// 终点输入框\nconst endInput = new PlaceAutocomplete('#end-input', { map });\n\n// 路径规划组件\nconst routePlan = new RoutePlan('#result-panel', { map });\n\n// 存储选中的起终点\nlet startPoint, endPoint;\n\nstartInput.on('select', (poi) => {\n    startPoint = poi.point;\n    trySearch();\n});\n\nendInput.on('select', (poi) => {\n    endPoint = poi.point;\n    trySearch();\n});\n\nfunction trySearch() {\n    if (startPoint && endPoint) {\n        routePlan.search({\n            start: startPoint,\n            end: endPoint,\n        });\n    }\n}\n```\n\n### 自定义地图绘制\n\n```javascript\nconst routePlan = new RoutePlan('#panel', { map });\n\nconst overlays = [];\n\nfunction clearOverlays() {\n    overlays.forEach(o => map.removeOverlay(o));\n    overlays.length = 0;\n}\n\nfunction drawRoute(plan) {\n    if (plan.path && plan.path.length > 0) {\n        const points = plan.path.map(pt => new BMapGL.Point(pt.lng, pt.lat));\n        const polyline = new BMapGL.Polyline(points, {\n            strokeColor: '#22c55e',\n            strokeWeight: 8,\n            strokeOpacity: 0.8,\n        });\n        map.addOverlay(polyline);\n        overlays.push(polyline);\n    }\n}\n\nfunction addMarker(location, label, color) {\n    const point = new BMapGL.Point(location.lng, location.lat);\n    const marker = new BMapGL.Marker(point);\n    map.addOverlay(marker);\n    overlays.push(marker);\n}\n\nroutePlan.on('result', (data) => {\n    clearOverlays();\n    const plan = data.plans[0];\n    if (plan) {\n        drawRoute(plan);\n        addMarker(data.start.location, '起', '#0f9977');\n        addMarker(data.end.location, '终', '#e53935');\n    }\n});\n\nroutePlan.on('planselect', (data) => {\n    clearOverlays();\n    drawRoute(data.plan);\n    const result = routePlan.getLastResult();\n    if (result) {\n        addMarker(result.start.location, '起', '#0f9977');\n        addMarker(result.end.location, '终', '#e53935');\n    }\n});\n```\n\n## 注意事项\n\n1. **坐标点必填**: start 和 end 参数必须是坐标点（Point），不支持地点名称\n2. **途经点限制**: 驾车路径规划最多支持 10 个途经点（起终点除外）\n3. **组件销毁**: 组件销毁时会自动清理所有事件监听器和地图覆盖物\n4. **地图依赖**: 必须先加载百度地图 JS API（BMap 或 BMapGL）\n\nFile v1.0.5:skill-card.md\n\n## Description:\n\n百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，帮助开发者快速实现地图界面。\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[baidu-maps](https://clawhub.ai/user/baidu-maps)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers use this skill as a reference for integrating Baidu Maps JSAPI UI Kit components into web map applications, including autocomplete, place search, place details, and driving route planning. It is most useful when an agent needs to produce implementation guidance, setup steps, or example JavaScript/TypeScript code for these UI components.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Map searches, selected POIs, place UIDs, and route coordinates may be sent to Baidu Maps when applications use the documented components.\n\nMitigation: Use the skill only when that data sharing is acceptable, and avoid entering sensitive location data in examples or production workflows.\n\nRisk: Examples show CDN loading for the UI Kit, which can introduce supply-chain exposure if assets change unexpectedly.\n\nMitigation: For production apps, pin @baidumap/jsapi-ui-kit to a reviewed version and pin or self-host CDN assets with SRI where practical.\n\nRisk: The examples require a Baidu Maps JSAPI key through BMAP_JSAPI_KEY or an API script URL.\n\nMitigation: Store and configure the key deliberately, apply provider-side restrictions where available, and avoid committing secrets into source files.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/baidu-maps/skills/baidu-map-jsapi-ui-kit)\n- [快速开始](artifact/references/getting-started.md)\n- [PlaceAutocomplete 地点自动补全](artifact/references/place-autocomplete.md)\n- [PlaceSearch 地点检索](artifact/references/place-search.md)\n- [PlaceDetail 地点详情](artifact/references/place-detail.md)\n- [RoutePlan 路径规划](artifact/references/route-plan.md)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Shell commands, Configuration guidance]\n\n**Output Format:** [Markdown guidance with JavaScript, TypeScript, HTML, and shell command snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Requires BMAP_JSAPI_KEY and a loaded Baidu Maps JS API instance for examples that call Baidu services.]\n\n## Skill Version(s):\n\n1.0.5 (source: server release evidence; artifact frontmatter lists 1.0.1)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.0.4: 7 files, 13707 bytes\n\nFiles: references/getting-started.md (1081b), references/place-autocomplete.md (10754b), references/place-detail.md (4405b), references/place-search.md (4494b), references/route-plan.md (11872b), SKILL.md (1736b), _meta.json (141b)\n\nFile v1.0.4:SKILL.md\n\n---\nname: jsapi-ui-kit\ndescription: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。\nversion: 1.0.1\nmetadata:\n  openclaw:\n    requires:\n      env: BMAP_JSAPI_KEY\n    primaryEnv: BMAP_JSAPI_KEY\n---\n\n# 百度地图 jsapi-ui-kit\n\n轻量级百度地图 UI 组件库，提供地点自动补全、地点检索、详情展示和路径规划能力。\n\n## 什么时候使用\n\n- 希望快速集成标准化的地图 UI 组件，无需从零开发\n- 需要在地图应用中添加搜索输入框自动补全功能\n- 需要在地图应用中添加地点搜索功能\n- 需要展示 POI 详情信息（名称、地址、电话等）\n- 需要实现驾车路径规划功能（支持多方案、途经点）\n\n## 文档导航\n\n- **[快速开始](references/getting-started.md)** - 安装、引入方式、基础示例\n- **[PlaceAutocomplete 地点自动补全](references/place-autocomplete.md)** - 搜索输入框实时建议\n- **[PlaceSearch 地点检索](references/place-search.md)** - 关键字/周边/范围检索\n- **[PlaceDetail 地点详情](references/place-detail.md)** - POI 详情展示\n- **[RoutePlan 路径规划](references/route-plan.md)** - 驾车路径规划（多方案、途经点、导航调起）\n\n## 如何使用\n\n根据用户问题查询文档导航，参考详细文档内容和API设计： \n```\nreferences/getting-started.md\n```\n每个参考文件包含：\n\n- 功能简要说明\n- 完整代码示例及解释\n- API 参数说明和注意事项\n\n## 注意事项\n\n- 必须先加载百度地图 JS API（BMap 或 BMapGL）\n\nFile v1.0.4:_meta.json\n\n{\n  \"ownerId\": \"kn778b6bf766ym71fdvrc5yvg98319rv\",\n  \"slug\": \"baidu-map-jsapi-ui-kit\",\n  \"version\": \"1.0.4\",\n  \"publishedAt\": 1775543773365\n}\n\nFile v1.0.4:references/getting-started.md\n\n# 快速开始\n\n## 安装\n\n```bash\nnpm install @baidumap/jsapi-ui-kit\n```\n\n## 引入方式\n\n### ESM 模块\n\n```javascript\nimport { PlaceSearch, PlaceDetail } from '@baidumap/jsapi-ui-kit';\nimport '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';\n```\n\n### CDN 引入\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css\">\n<script src=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js\"></script>\n```\n\nCDN 方式下通过全局变量 `BMapUIKit` 访问组件。\n\n## 前置依赖\n\n使用前需先加载百度地图 JS API：\n\n```html\n<script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n```\n\n## 基础示例\n\n```javascript\n// 1. 初始化地图\nconst map = new BMapGL.Map('map-container');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 2. 创建检索组件\nconst search = new BMapUIKit.PlaceSearch('#search-panel', { map });\n\n// 3. 监听事件\nsearch.on('select', (poi) => {\n  console.log('选中:', poi.title);\n});\n\n// 4. 执行检索\nsearch.search('餐厅');\n```\n\nFile v1.0.4:references/place-autocomplete.md\n\n# PlaceAutocomplete 地点自动补全组件\n\n## 构造函数\n\n```typescript\nnew PlaceAutocomplete(container: string | HTMLElement, options: PlaceAutocompleteOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceAutocompleteOptions` | 是   | 配置选项           |\n\n**PlaceAutocompleteOptions**:\n\n```typescript\ninterface PlaceAutocompleteOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    placeholder?: string; // 输入框占位符，默认 '搜索地点'\n    debounce?: number; // 防抖延迟（毫秒），默认 300\n    location?: string; // 检索城市，默认使用地图中心所在城市\n    citylimit?: boolean; // 是否严格限制在指定城市内，默认 false\n    types?: string; // 结果类型过滤，默认 'all'\n    minLength?: number; // 触发检索的最小字符数，默认 1\n    showSuggestion?: boolean; // 是否显示下拉建议列表，默认 true\n    suggestionCount?: number; // 建议列表最大条数，默认移动端 6 条，PC 端 10 条\n}\n```\n\n---\n\n## 方法\n\n### search(keyword)\n\n手动触发检索。\n\n```typescript\nsearch(keyword: string): void\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明       |\n| ------- | -------- | ---- | ---------- |\n| keyword | `string` | 是   | 检索关键字 |\n\n**示例**:\n\n```javascript\nautocomplete.search('百度大厦');\n```\n\n---\n\n### setInputValue(value)\n\n设置输入框的值（不触发检索）。\n\n```typescript\nsetInputValue(value: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明     |\n| ----- | -------- | ---- | -------- |\n| value | `string` | 是   | 输入值   |\n\n**示例**:\n\n```javascript\nautocomplete.setInputValue('百度大厦');\n```\n\n---\n\n### getInputValue()\n\n获取输入框当前值。\n\n```typescript\ngetInputValue(): string\n```\n\n**返回值**: 当前输入框的值\n\n**示例**:\n\n```javascript\nconst value = autocomplete.getInputValue();\nconsole.log('当前输入:', value);\n```\n\n---\n\n### setLocation(location)\n\n设置检索城市。\n\n```typescript\nsetLocation(location: string): void\n```\n\n**参数**:\n\n| 参数     | 类型     | 必填 | 说明                           |\n| -------- | -------- | ---- | ------------------------------ |\n| location | `string` | 是   | 城市名称（如 '北京'、'上海'） |\n\n**示例**:\n\n```javascript\nautocomplete.setLocation('北京');\n```\n\n---\n\n### setCitylimit(citylimit)\n\n设置是否严格限制在指定城市内搜索。\n\n```typescript\nsetCitylimit(citylimit: boolean): void\n```\n\n**参数**:\n\n| 参数      | 类型      | 必填 | 说明         |\n| --------- | --------- | ---- | ------------ |\n| citylimit | `boolean` | 是   | 是否限制城市 |\n\n**示例**:\n\n```javascript\nautocomplete.setCitylimit(true);\n```\n\n---\n\n### setTypes(types)\n\n设置结果类型过滤。\n\n```typescript\nsetTypes(types: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明                        |\n| ----- | -------- | ---- | --------------------------- |\n| types | `string` | 是   | 类型过滤（如 'all'、'bus'） |\n\n**示例**:\n\n```javascript\nautocomplete.setTypes('bus');\n```\n\n---\n\n### show()\n\n显示下拉列表。\n\n```typescript\nshow(): void\n```\n\n---\n\n### hide()\n\n隐藏下拉列表。\n\n```typescript\nhide(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### suggest\n\n实时搜索建议更新时触发。\n\n```typescript\nautocomplete.on('suggest', (suggestions: PlaceAutocompleteEventSuggestion[]) => {\n    console.log('搜索建议:', suggestions);\n});\n```\n\n**回调参数**: `PlaceAutocompleteEventSuggestion[]` - 建议列表\n\n---\n\n### select\n\n用户选中某个建议时触发。\n\n```typescript\nautocomplete.on('select', (suggestion: PlaceAutocompleteEventSuggestion) => {\n    console.log('选中:', suggestion);\n\n    // 通常在 select 事件中触发 PlaceSearch 检索\n    if (suggestion.point) {\n        search.searchNearby(suggestion.name, suggestion.point, 1000);\n    } else {\n        search.search(suggestion.name);\n    }\n});\n```\n\n**回调参数**: `PlaceAutocompleteEventSuggestion` - 选中的建议项\n\n**典型使用场景**:\n- 将选中的地点传递给 `PlaceSearch` 组件进行详细检索\n- 在地图上添加标记\n- 更新地图中心点\n\n---\n\n### highlight\n\n用户通过键盘上下键切换高亮项时触发。\n\n```typescript\nautocomplete.on('highlight', (event: { from: HighlightItem | null, to: HighlightItem }) => {\n    console.log('高亮切换:', event);\n});\n```\n\n**回调参数**: 包含 `from`（上一个高亮项）和 `to`（当前高亮项）的对象\n\n---\n\n## 类型定义\n\n### PlaceAutocompleteEventSuggestion\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceAutocompleteEventSuggestion {\n    province: string; // 省份\n    city: string; // 城市\n    district: string; // 区县\n    name: string; // POI 名称（如\"京酱肉丝\"、\"百度大厦\"）\n    street: string; // @deprecated 使用 name 字段代替，为兼容旧版保留\n    business: string; // 商圈\n    address: string; // 地址\n    tag?: string; // 标签\n    point?: BMapGL.Point; // 坐标（部分建议可能没有坐标）\n    uid?: string; // POI 唯一标识\n}\n```\n\n### HighlightItem\n\n高亮切换事件数据。\n\n```typescript\ninterface HighlightItem {\n    index: number; // 高亮项在列表中的索引\n    value: PlaceAutocompleteEventSuggestion; // 高亮项数据\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport BMapUIKit from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n\n// 创建自动补全组件\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    placeholder: '搜索地点',\n    location: '北京',\n    citylimit: false,\n});\n\n// 监听建议更新\nautocomplete.on('suggest', suggestions => {\n    console.log('搜索建议:', suggestions);\n});\n\n// 监听用户选中\nautocomplete.on('select', suggestion => {\n    console.log('选中:', suggestion);\n});\n```\n\n---\n\n### 与 PlaceSearch 联动\n\n```javascript\nimport BMapUIKit from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n\n// 自动补全组件\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    placeholder: '搜索地点',\n    debounce: 300,\n    location: '北京',\n});\n\n// 搜索结果展示组件\nconst search = new BMapUIKit.PlaceSearch('#search-results', {\n    map,\n    pageCapacity: 10,\n});\n\n// 详情展示组件\nconst detail = new BMapUIKit.PlaceDetail('#detail-panel', {\n    map,\n});\n\n// 选中建议后触发搜索\nautocomplete.on('select', suggestion => {\n    if (!suggestion) return;\n\n    // 构建搜索关键词\n    const keyword = suggestion.name || suggestion.address || autocomplete.getInputValue();\n\n    if (suggestion.point) {\n        // 如果有坐标，使用周边搜索\n        search.searchNearby(keyword, suggestion.point, 1000);\n    } else {\n        // 否则使用关键词搜索\n        search.search(keyword);\n    }\n});\n\n// 搜索结果选中后展示详情\nsearch.on('select', poi => {\n    if (poi && poi.uid) {\n        detail.setPlace(poi.uid);\n    }\n});\n```\n\n---\n\n### 动态切换城市\n\n```javascript\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    location: '北京',\n    citylimit: false,\n});\n\n// 切换搜索城市\ndocument.getElementById('city-select').addEventListener('change', (e) => {\n    const city = e.target.value;\n    autocomplete.setLocation(city);\n\n    // 同步移动地图到对应城市\n    const cityCenters = {\n        '北京': [116.404, 39.915],\n        '上海': [121.473, 31.230],\n        '广州': [113.264, 23.129],\n    };\n    const coords = cityCenters[city];\n    if (coords) {\n        map.centerAndZoom(new BMapGL.Point(coords[0], coords[1]), 14);\n    }\n});\n\n// 切换城市限制\ndocument.getElementById('citylimit-check').addEventListener('change', (e) => {\n    autocomplete.setCitylimit(e.target.checked);\n});\n```\n\n---\n\n### 键盘导航支持\n\nPlaceAutocomplete 组件内置了完整的键盘导航支持：\n\n- **↓ (ArrowDown)**: 向下选择建议项\n- **↑ (ArrowUp)**: 向上选择建议项\n- **Enter**: 确认选中当前高亮的建议项\n- **Escape**: 关闭下拉列表\n\n```javascript\nautocomplete.on('highlight', ({ from, to }) => {\n    console.log(`高亮从 ${from?.index} 切换到 ${to.index}`);\n    console.log('当前高亮项:', to.value.name);\n});\n\nautocomplete.on('select', suggestion => {\n    console.log('用户确认选中:', suggestion.name);\n});\n```\n\n---\n\n## 完整示例 HTML\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <title>PlaceAutocomplete 示例</title>\n  <style>\n    #map { width: 100%; height: 500px; }\n    #autocomplete-container { width: 300px; margin: 20px; }\n  </style>\n</head>\n<body>\n  <div id=\"autocomplete-container\"></div>\n  <div id=\"map\"></div>\n\n  <script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n  <script type=\"module\">\n    import BMapUIKit from '@baidumap/jsapi-ui-kit';\n\n    const map = new BMapGL.Map('map');\n    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n    map.enableScrollWheelZoom(true);\n\n    const autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n        map,\n        placeholder: '搜索地点',\n        location: '北京',\n    });\n\n    autocomplete.on('select', suggestion => {\n        console.log('选中:', suggestion);\n        if (suggestion.point) {\n            map.centerAndZoom(suggestion.point, 16);\n            const marker = new BMapGL.Marker(suggestion.point);\n            map.addOverlay(marker);\n        }\n    });\n  </script>\n</body>\n</html>\n```\n\n---\n\n## 注意事项\n\n1. **必须先加载百度地图 API**: 确保在使用组件前已加载 BMap 或 BMapGL\n2. **防抖优化**: 默认 300ms 防抖延迟，避免频繁请求。可通过 `debounce` 参数调整\n3. **移动端适配**: 组件会自动检测设备类型，移动端建议列表默认显示 6 条，PC 端 10 条\n4. **城市设置**:\n   - `location` 为空时，使用地图中心所在城市\n   - `citylimit: true` 时，严格限制在指定城市内搜索\n5. **坐标可用性**: 并非所有建议都包含坐标（`point`），使用前需判断\n6. **与 PlaceSearch 联动**: 选中建议后通常需要触发 PlaceSearch 进行详细检索\n7. **内存管理**: 组件销毁时会自动清理所有事件监听器和 DOM 元素\n\nFile v1.0.4:references/place-detail.md\n\n# PlaceDetail 地点详情组件\n\n## 构造函数\n\n```typescript\nnew PlaceDetail(container: string | HTMLElement, options: PlaceDetailOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceDetailOptions`    | 是   | 配置选项              |\n\n**PlaceDetailOptions**:\n\n```typescript\ninterface PlaceDetailOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    layout?: 'default' | 'compact'; // 布局模式，默认 'default'\n    display?: PlaceDetailDisplayOptions;\n}\n\ninterface PlaceDetailDisplayOptions {\n    image?: boolean; // 显示图片\n    title?: boolean; // 显示标题\n    type?: boolean; // 显示类型\n    address?: boolean; // 显示地址\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n    website?: boolean; // 显示网址\n}\n```\n\n**布局模式**:\n\n| 值          | 说明                       |\n| ----------- | -------------------------- |\n| `'default'` | 详细竖向布局，适合侧边栏   |\n| `'compact'` | 紧凑横向布局，适合底部面板 |\n\n---\n\n## 方法\n\n### setPlace(uidOrPoi)\n\n加载并展示地点详情。\n\n```typescript\nsetPlace(uidOrPoi: string | LocalResultPoiType): void\n```\n\n**参数**:\n\n| 参数     | 类型                 | 必填 | 说明        |\n| -------- | -------------------- | ---- | ----------- |\n| uidOrPoi | `string`             | 是   | POI 的 UID  |\n| uidOrPoi | `LocalResultPoiType` | 是   | 或 POI 对象 |\n\n**示例**:\n\n```javascript\n// 通过 UID 加载（会发起网络请求）\ndetail.setPlace('abc123uid');\n\n// 通过 POI 对象直接展示（无网络请求）\ndetail.setPlace({\n    name: '天安门',\n    address: '北京市东城区',\n    point: {lng: 116.404, lat: 39.915},\n    tel: '010-12345678',\n});\n```\n\n---\n\n### clear()\n\n清空详情面板，显示空状态。\n\n```typescript\nclear(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n详情加载完成时触发。\n\n```typescript\ndetail.on('load', (data: PlaceDetailEventData) => {\n    console.log('详情:', data.title, data.address);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceDetailEventData\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceDetailEventData {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: {lng: number; lat: number}; // 坐标\n    tel?: string; // 电话\n}\n```\n\n### LocalResultPoiType\n\n传入 `setPlace()` 的 POI 对象类型（来自 BMap API）。\n\n```typescript\n// 参考 BMap.LocalResultPoi\ninterface LocalResultPoiType {\n    name?: string;\n    title?: string;\n    addr?: string;\n    address?: string;\n    uid?: string;\n    point?: {lng: number; lat: number};\n    tel?: string;\n    // ... 其他字段\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst detail = new PlaceDetail('#detail-panel', {map});\n\ndetail.on('load', (data) => {\n    console.log('加载完成:', data.title);\n});\n\n// 加载详情\ndetail.setPlace('poi_uid_string');\n```\n\n### 配置显示字段\n\n```javascript\nconst detail = new PlaceDetail('#panel', {\n    map,\n    layout: 'compact',\n    display: {\n        image: true,\n        title: true,\n        address: true,\n        phone: true,\n        rating: false,\n        website: false,\n    },\n});\n```\n\n### 与 PlaceSearch 联动\n\n```javascript\nimport {PlaceSearch, PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst search = new PlaceSearch('#search', {map});\nconst detail = new PlaceDetail('#detail', {map});\n\n// 点击搜索结果时展示详情\nsearch.on('select', (poi) => {\n    if (poi.uid) {\n        detail.setPlace(poi.uid);\n    } else {\n        // 没有 UID 时直接展示已有信息\n        detail.setPlace(poi);\n    }\n});\n```\n\n### 动态切换布局\n\n```javascript\n// 根据屏幕宽度选择布局\nconst layout = window.innerWidth < 768 ? 'compact' : 'default';\nconst detail = new PlaceDetail('#panel', {map, layout});\n```\n\nFile v1.0.4:references/place-search.md\n\n# PlaceSearch 地点检索组件\n\n## 构造函数\n\n```typescript\nnew PlaceSearch(container: string | HTMLElement, options: PlaceSearchOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceSearchOptions`    | 是   | 配置选项              |\n\n**PlaceSearchOptions**:\n\n```typescript\ninterface PlaceSearchOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    pageCapacity?: number; // 每页结果条数，默认 10\n    pageNum?: number; // 页码，默认 0\n    display?: PlaceSearchDisplayOptions;\n}\n\ninterface PlaceSearchDisplayOptions {\n    title?: boolean; // 显示标题\n    address?: boolean; // 显示地址\n    type?: boolean; // 显示类型\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n}\n```\n\n---\n\n## 方法\n\n### search(keyword, option?)\n\n关键字检索。\n\n```typescript\nsearch(keyword: string, option?: { city?: string }): Promise<void>\n```\n\n**参数**:\n\n| 参数        | 类型     | 必填 | 说明             |\n| ----------- | -------- | ---- | ---------------- |\n| keyword     | `string` | 是   | 检索关键字       |\n| option.city | `string` | 否   | 城市名称（预留） |\n\n**示例**:\n\n```javascript\nawait search.search('餐厅');\nawait search.search('咖啡', {city: '北京'});\n```\n\n---\n\n### searchNearby(keyword, center, radius?)\n\n周边检索。\n\n```typescript\nsearchNearby(\n  keyword: string,\n  center: BMap.Point | BMapGL.Point,\n  radius?: number\n): Promise<void>\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明                  |\n| ------- | -------- | ---- | --------------------- |\n| keyword | `string` | 是   | 检索关键字            |\n| center  | `Point`  | 是   | 圆心坐标              |\n| radius  | `number` | 否   | 半径（米），默认 2000 |\n\n**示例**:\n\n```javascript\nconst center = new BMapGL.Point(116.404, 39.915);\nawait search.searchNearby('酒店', center, 1000);\n```\n\n---\n\n### searchInBounds(keyword, bounds)\n\n范围检索。\n\n```typescript\nsearchInBounds(\n  keyword: string,\n  bounds: { sw: BMapGL.Point, ne: BMapGL.Point }\n): Promise<void>\n```\n\n**参数**:\n\n| 参数      | 类型     | 必填 | 说明       |\n| --------- | -------- | ---- | ---------- |\n| keyword   | `string` | 是   | 检索关键字 |\n| bounds    | `object` | 是   | 矩形范围   |\n| bounds.sw | `Point`  | 是   | 西南角坐标 |\n| bounds.ne | `Point`  | 是   | 东北角坐标 |\n\n**示例**:\n\n```javascript\nawait search.searchInBounds('商场', {\n    sw: new BMapGL.Point(116.3, 39.8),\n    ne: new BMapGL.Point(116.5, 40.0),\n});\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n检索完成时触发。\n\n```typescript\nsearch.on('load', (list: PlaceSearchEventPoi[]) => {\n    console.log('检索结果:', list);\n});\n```\n\n### select\n\n用户点击列表项时触发。\n\n```typescript\nsearch.on('select', (poi: PlaceSearchEventPoi) => {\n    console.log('选中:', poi.title, poi.point);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceSearchEventPoi\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceSearchEventPoi {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: BMapGL.Point; // 坐标\n    tel?: string; // 电话\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceSearch} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst search = new PlaceSearch('#search-panel', {map});\n\nsearch.on('load', (list) => {\n    console.log(`共 ${list.length} 条结果`);\n});\n\nsearch.on('select', (poi) => {\n    map.centerAndZoom(poi.point, 16);\n});\n\nsearch.search('美食');\n```\n\n### 配置显示字段\n\n```javascript\nconst search = new PlaceSearch('#panel', {\n    map,\n    pageCapacity: 5,\n    display: {\n        title: true,\n        address: true,\n        phone: true,\n        rating: false,\n        openingHours: false,\n    },\n});\n```\n\n### 周边检索联动\n\n```javascript\n// 点击地图时，在点击位置周边检索\nmap.addEventListener('click', (e) => {\n    search.searchNearby('餐厅', e.latlng, 500);\n});\n```\n\nFile v1.0.4:references/route-plan.md\n\n# RoutePlan 路径规划组件\n\n路径规划 UI 组件，封装百度地图路径规划服务，提供统一的 API 和归一化的数据格式。\n\n> **注意**: 目前仅开放**驾车**路径规划功能。公交、骑行、步行等后续会陆续开放。\n\n## 构造函数\n\n```typescript\nnew RoutePlan(container: string | HTMLElement, options: RoutePlanOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `RoutePlanOptions`      | 是   | 配置选项              |\n\n**RoutePlanOptions**:\n\n```typescript\ninterface RoutePlanOptions {\n    /** 地图实例，必传 */\n    map: BMap.Map | BMapGL.Map;\n    /** 驾车配置 */\n    drivingOptions?: DrivingOptions;\n}\n\ninterface DrivingOptions {\n    /** 驾车策略，默认 DEFAULT (0) */\n    policy?: DrivingPolicy;\n    /** 是否返回备选路线：0-返回一条推荐路线，1-返回1-3条路线供选择，默认 0 */\n    alternatives?: 0 | 1;\n}\n```\n\n\n## 导入方式\n\n```typescript\nimport {\n    RoutePlan,\n    DrivingPolicy,\n    // 以下暂未开放\n    TransitPolicy,\n    IntercityPolicy,\n    TransitTypePolicy,\n    LineType,\n} from '@baidumap/jsapi-ui-kit';\n\n// 类型导入\nimport type {\n    RoutePlanOptions,\n    RoutePlanType,\n    RoutePlanSearchOptions,\n    RoutePlanEventData,\n    NormalizedRouteResult,\n    NormalizedPlan,\n    NormalizedPoint,\n    NormalizedLocation,\n    Segment,\n    DriveSegment,\n} from '@baidumap/jsapi-ui-kit';\n```\n\n## 驾车策略枚举\n\n```typescript\nenum DrivingPolicy {\n    DEFAULT = 0,                        // 默认策略\n    LEAST_DISTANCE = 2,                 // 距离最短（不考虑限行和路况，用于估价场景）\n    AVOID_HIGHWAYS = 3,                 // 不走高速\n    FIRST_HIGHWAYS = 4,                 // 高速优先\n    AVOID_CONGESTION = 5,               // 躲避拥堵\n    AVOID_PAY = 6,                      // 少收费\n    HIGHWAYS_AVOID_CONGESTION = 7,      // 高速优先+躲避拥堵\n    AVOID_HIGHWAYS_CONGESTION = 8,      // 不走高速+躲避拥堵\n    AVOID_CONGESTION_PAY = 9,           // 躲避拥堵+少收费\n    AVOID_HIGHWAYS_CONGESTION_PAY = 10, // 不走高速+躲避拥堵+少收费\n    AVOID_HIGHWAYS_PAY = 11,            // 不走高速+少收费\n    DISTANCE_PRIORITY = 12,             // 距离优先（考虑限行和路况，距离相对短但不一定稳定）\n    TIME_PRIORITY = 13,                 // 时间优先\n}\n```\n\n\n## 方法\n\n### search(searchOptions)\n\n发起路径规划搜索。\n\n```typescript\nsearch(searchOptions: RoutePlanSearchOptions): Promise<NormalizedRouteResult>\n```\n\n**RoutePlanSearchOptions**:\n\n| 参数      | 类型              | 必填 | 说明                                   |\n| --------- | ----------------- | ---- | -------------------------------------- |\n| start     | `Point`           | 是   | 起点坐标                               |\n| end       | `Point`           | 是   | 终点坐标                               |\n| startName | `string`          | 否   | 起点名称（用于外部导航展示）           |\n| endName   | `string`          | 否   | 终点名称（用于外部导航展示）           |\n| startUid  | `string`          | 否   | 起点POI的UID，填写后将提升路线规划的准确性 |\n| endUid    | `string`          | 否   | 终点POI的UID，填写后将提升路线规划的准确性 |\n| waypoints | `Point[]`         | 否   | 途经点数组（驾车最多 10 个）           |\n\n**示例**:\n\n```javascript\n// 基础用法\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n});\n\n// 带途经点\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n    waypoints: [\n        new BMapGL.Point(116.35, 39.95),\n    ],\n});\n\n// 带UID提升准确性\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n    startUid: 'xxx',\n    endUid: 'yyy',\n});\n\n// 填写起终点名称\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    startName: '北京西站',\n    startUid: 'xxx',\n    end: new BMapGL.Point(116.305, 39.982),\n    endName: '西直门',\n    endUid: 'yyy',\n});\n```\n\n### clear()\n\n清空搜索结果和地图覆盖物。\n\n```typescript\nclear(): void\n```\n\n### getCurrentType()\n\n获取当前路径规划类型。\n\n```typescript\ngetCurrentType(): RoutePlanType\n```\n\n**返回值**: `'driving'` | `'transit'` | `'riding'` | `'walking'`\n\n### getLastResult()\n\n获取上次搜索的归一化结果。\n\n```typescript\ngetLastResult(): NormalizedRouteResult | null\n```\n\n### destroy()\n\n销毁组件，清理 DOM、事件和地图覆盖物。\n\n```typescript\ndestroy(): void\n```\n\n\n### on(event, handler)\n\n注册事件监听。\n\n```typescript\non(event: string, handler: Function): this\n```\n\n\n### off(event, handler?)\n\n移除事件监听。\n\n```typescript\noff(event: string, handler?: Function): this\n```\n\n\n## 事件\n\n| 事件名      | 触发时机               | 回调参数                                    |\n| ----------- | ---------------------- | ------------------------------------------- |\n| `result`    | 搜索成功               | `RoutePlanEventData`                        |\n| `error`     | 搜索失败               | `Error`                                     |\n| `typechange`| 路径类型切换           | `{ type: RoutePlanType }`                   |\n| `planselect`| 方案选中（展开详情）   | `{ type, planIndex, plan }`                 |\n| `clear`     | 清空结果               | 无                                          |\n| `navclick`  | 点击\"开始导航\"按钮     | `{ type, result, planIndex, plan }`         |\n\n**示例**:\n\n```javascript\n// 监听搜索结果\nroutePlan.on('result', (data) => {\n    console.log('起点:', data.start.title);\n    console.log('终点:', data.end.title);\n    console.log('方案数量:', data.plans.length);\n});\n\n// 监听错误\nroutePlan.on('error', (err) => {\n    console.error('路径规划失败:', err.message);\n});\n\n// 监听方案切换\nroutePlan.on('planselect', (data) => {\n    console.log('选中方案:', data.planIndex);\n    console.log('距离:', data.plan.distanceText);\n    console.log('时长:', data.plan.durationText);\n});\n\n// 监听导航调起\nroutePlan.on('navclick', (data) => {\n    // 可在此处理跳转百度地图 App 进行导航\n    console.log('调起导航', data);\n});\n```\n\n\n## 类型定义\n\n### RoutePlanEventData\n\n```typescript\ninterface RoutePlanEventData {\n    /** 路径规划类型 */\n    type: RoutePlanType;\n    /** 起点信息 */\n    start: NormalizedPoint;\n    /** 终点信息 */\n    end: NormalizedPoint;\n    /** 方案数组 */\n    plans: NormalizedPlan[];\n}\n```\n\n### NormalizedRouteResult\n\n```typescript\ninterface NormalizedRouteResult {\n    /** 路径规划类型 */\n    routeType: RoutePlanType;\n    /** 起点信息 */\n    start: NormalizedPoint;\n    /** 终点信息 */\n    end: NormalizedPoint;\n    /** 方案数组 */\n    plans: NormalizedPlan[];\n}\n```\n\n### NormalizedPlan\n\n```typescript\ninterface NormalizedPlan {\n    /** 总距离（米） */\n    distance: number;\n    /** 距离文本 */\n    distanceText: string;\n    /** 总时长（秒） */\n    duration: number;\n    /** 时长文本 */\n    durationText: string;\n    /** 路段数组 */\n    segments: Segment[];\n\n    // 驾车特有字段\n    /** 过路费（元） */\n    toll?: number;\n    /** 收费路段距离（米） */\n    tollDistance?: number;\n    /** 红绿灯个数 */\n    trafficLights?: number;\n    /** 路况/方案特点摘要，如「一路畅通|时间少」 */\n    tag?: string;\n    /** 途经点数组 */\n    waypoints?: string[];\n    /** 完整路径坐标点 */\n    path?: NormalizedLocation[];\n}\n```\n\n### NormalizedPoint\n\n```typescript\ninterface NormalizedPoint {\n    /** 地点名称 */\n    title: string;\n    /** 坐标位置 */\n    location: NormalizedLocation;\n    /** 所属城市 */\n    city?: string;\n    /** UID */\n    uid?: string;\n}\n```\n\n### NormalizedLocation\n\n```typescript\ninterface NormalizedLocation {\n    /** 经度 */\n    lng: number;\n    /** 纬度 */\n    lat: number;\n}\n```\n\n### DriveSegment\n\n```typescript\ninterface DriveSegment extends BaseSegment {\n    type: 'drive';\n    /** 路段描述 */\n    description: string;\n    /** 起点位置 */\n    location: NormalizedLocation;\n    /** 道路名称 */\n    roadName?: string;\n    /** 行驶时长（秒） */\n    duration?: number;\n}\n```\n\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport { RoutePlan, DrivingPolicy } from '@baidumap/jsapi-ui-kit';\n\n// 初始化地图\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 创建路径规划组件\nconst routePlan = new RoutePlan('#route-panel', {\n    map: map,\n    drivingOptions: {\n        policy: DrivingPolicy.AVOID_CONGESTION,\n        alternatives: 1,  // 返回 1-3 条备选路线\n    },\n});\n\n// 发起搜索\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n});\n```\n\n### 配合地点搜索组件使用\n\n```javascript\nimport { RoutePlan, PlaceAutocomplete, PlaceSearch } from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 起点输入框\nconst startInput = new PlaceAutocomplete('#start-input', { map });\n// 终点输入框\nconst endInput = new PlaceAutocomplete('#end-input', { map });\n\n// 路径规划组件\nconst routePlan = new RoutePlan('#result-panel', { map });\n\n// 存储选中的起终点\nlet startPoint, endPoint;\n\nstartInput.on('select', (poi) => {\n    startPoint = poi.point;\n    trySearch();\n});\n\nendInput.on('select', (poi) => {\n    endPoint = poi.point;\n    trySearch();\n});\n\nfunction trySearch() {\n    if (startPoint && endPoint) {\n        routePlan.search({\n            start: startPoint,\n            end: endPoint,\n        });\n    }\n}\n```\n\n### 自定义地图绘制\n\n```javascript\nconst routePlan = new RoutePlan('#panel', { map });\n\nconst overlays = [];\n\nfunction clearOverlays() {\n    overlays.forEach(o => map.removeOverlay(o));\n    overlays.length = 0;\n}\n\nfunction drawRoute(plan) {\n    if (plan.path && plan.path.length > 0) {\n        const points = plan.path.map(pt => new BMapGL.Point(pt.lng, pt.lat));\n        const polyline = new BMapGL.Polyline(points, {\n            strokeColor: '#22c55e',\n            strokeWeight: 8,\n            strokeOpacity: 0.8,\n        });\n        map.addOverlay(polyline);\n        overlays.push(polyline);\n    }\n}\n\nfunction addMarker(location, label, color) {\n    const point = new BMapGL.Point(location.lng, location.lat);\n    const marker = new BMapGL.Marker(point);\n    map.addOverlay(marker);\n    overlays.push(marker);\n}\n\nroutePlan.on('result', (data) => {\n    clearOverlays();\n    const plan = data.plans[0];\n    if (plan) {\n        drawRoute(plan);\n        addMarker(data.start.location, '起', '#0f9977');\n        addMarker(data.end.location, '终', '#e53935');\n    }\n});\n\nroutePlan.on('planselect', (data) => {\n    clearOverlays();\n    drawRoute(data.plan);\n    const result = routePlan.getLastResult();\n    if (result) {\n        addMarker(result.start.location, '起', '#0f9977');\n        addMarker(result.end.location, '终', '#e53935');\n    }\n});\n```\n\n## 注意事项\n\n1. **坐标点必填**: start 和 end 参数必须是坐标点（Point），不支持地点名称\n2. **途经点限制**: 驾车路径规划最多支持 10 个途经点（起终点除外）\n3. **组件销毁**: 组件销毁时会自动清理所有事件监听器和地图覆盖物\n4. **地图依赖**: 必须先加载百度地图 JS API（BMap 或 BMapGL）\n\nArchive v1.0.2: 7 files, 13799 bytes\n\nFiles: references/getting-started.md (1081b), references/place-autocomplete.md (10754b), references/place-detail.md (4405b), references/place-search.md (4494b), references/route-plan.md (11872b), SKILL.md (1990b), _meta.json (141b)\n\nFile v1.0.2:SKILL.md\n\n---\nname: jsapi-ui-kit\ndescription: 百度地图 JavaScript API ui-kit 组件库开发指南。提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考。当用户需要：(1) 实现地点搜索输入框自动补全、(2) 在百度地图上实现地点搜索功能、(3) 展示 POI 详情信息、(4) 实现驾车路径规划功能、(5) 了解 @baidumap/jsapi-ui-kit 的 API 用法、(6) 处理组件事件回调时使用此 skill。\nmetadata:\n  openclaw:\n    requires:\n      bins: [\"node\"]\n      env: BMAP_JSAPI_KEY\n    primaryEnv: BMAP_JSAPI_KEY\n---\n\n# 百度地图 jsapi-ui-kit\n\n轻量级百度地图 UI 组件库，提供地点自动补全、地点检索、详情展示和路径规划能力。\n\n## 什么时候使用\n\n- 希望快速集成标准化的地图 UI 组件，无需从零开发\n- 需要在地图应用中添加搜索输入框自动补全功能\n- 需要在地图应用中添加地点搜索功能\n- 需要展示 POI 详情信息（名称、地址、电话等）\n- 需要实现驾车路径规划功能（支持多方案、途经点）\n\n## 文档导航\n\n- **[快速开始](references/getting-started.md)** - 安装、引入方式、基础示例\n- **[PlaceAutocomplete 地点自动补全](references/place-autocomplete.md)** - 搜索输入框实时建议\n- **[PlaceSearch 地点检索](references/place-search.md)** - 关键字/周边/范围检索\n- **[PlaceDetail 地点详情](references/place-detail.md)** - POI 详情展示\n- **[RoutePlan 路径规划](references/route-plan.md)** - 驾车路径规划（多方案、途经点、导航调起）\n\n## 如何使用\n\n根据用户问题查询文档导航，参考详细文档内容和API设计： \n```\nreferences/getting-started.md\n```\n每个参考文件包含：\n\n- 功能简要说明\n- 完整代码示例及解释\n- API 参数说明和注意事项\n\n## 注意事项\n\n- 必须先加载百度地图 JS API（BMap 或 BMapGL）\n\nFile v1.0.2:_meta.json\n\n{\n  \"ownerId\": \"kn778b6bf766ym71fdvrc5yvg98319rv\",\n  \"slug\": \"baidu-map-jsapi-ui-kit\",\n  \"version\": \"1.0.2\",\n  \"publishedAt\": 1773391071576\n}\n\nFile v1.0.2:references/getting-started.md\n\n# 快速开始\n\n## 安装\n\n```bash\nnpm install @baidumap/jsapi-ui-kit\n```\n\n## 引入方式\n\n### ESM 模块\n\n```javascript\nimport { PlaceSearch, PlaceDetail } from '@baidumap/jsapi-ui-kit';\nimport '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';\n```\n\n### CDN 引入\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css\">\n<script src=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js\"></script>\n```\n\nCDN 方式下通过全局变量 `BMapUIKit` 访问组件。\n\n## 前置依赖\n\n使用前需先加载百度地图 JS API：\n\n```html\n<script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n```\n\n## 基础示例\n\n```javascript\n// 1. 初始化地图\nconst map = new BMapGL.Map('map-container');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 2. 创建检索组件\nconst search = new BMapUIKit.PlaceSearch('#search-panel', { map });\n\n// 3. 监听事件\nsearch.on('select', (poi) => {\n  console.log('选中:', poi.title);\n});\n\n// 4. 执行检索\nsearch.search('餐厅');\n```\n\nFile v1.0.2:references/place-autocomplete.md\n\n# PlaceAutocomplete 地点自动补全组件\n\n## 构造函数\n\n```typescript\nnew PlaceAutocomplete(container: string | HTMLElement, options: PlaceAutocompleteOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceAutocompleteOptions` | 是   | 配置选项           |\n\n**PlaceAutocompleteOptions**:\n\n```typescript\ninterface PlaceAutocompleteOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    placeholder?: string; // 输入框占位符，默认 '搜索地点'\n    debounce?: number; // 防抖延迟（毫秒），默认 300\n    location?: string; // 检索城市，默认使用地图中心所在城市\n    citylimit?: boolean; // 是否严格限制在指定城市内，默认 false\n    types?: string; // 结果类型过滤，默认 'all'\n    minLength?: number; // 触发检索的最小字符数，默认 1\n    showSuggestion?: boolean; // 是否显示下拉建议列表，默认 true\n    suggestionCount?: number; // 建议列表最大条数，默认移动端 6 条，PC 端 10 条\n}\n```\n\n---\n\n## 方法\n\n### search(keyword)\n\n手动触发检索。\n\n```typescript\nsearch(keyword: string): void\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明       |\n| ------- | -------- | ---- | ---------- |\n| keyword | `string` | 是   | 检索关键字 |\n\n**示例**:\n\n```javascript\nautocomplete.search('百度大厦');\n```\n\n---\n\n### setInputValue(value)\n\n设置输入框的值（不触发检索）。\n\n```typescript\nsetInputValue(value: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明     |\n| ----- | -------- | ---- | -------- |\n| value | `string` | 是   | 输入值   |\n\n**示例**:\n\n```javascript\nautocomplete.setInputValue('百度大厦');\n```\n\n---\n\n### getInputValue()\n\n获取输入框当前值。\n\n```typescript\ngetInputValue(): string\n```\n\n**返回值**: 当前输入框的值\n\n**示例**:\n\n```javascript\nconst value = autocomplete.getInputValue();\nconsole.log('当前输入:', value);\n```\n\n---\n\n### setLocation(location)\n\n设置检索城市。\n\n```typescript\nsetLocation(location: string): void\n```\n\n**参数**:\n\n| 参数     | 类型     | 必填 | 说明                           |\n| -------- | -------- | ---- | ------------------------------ |\n| location | `string` | 是   | 城市名称（如 '北京'、'上海'） |\n\n**示例**:\n\n```javascript\nautocomplete.setLocation('北京');\n```\n\n---\n\n### setCitylimit(citylimit)\n\n设置是否严格限制在指定城市内搜索。\n\n```typescript\nsetCitylimit(citylimit: boolean): void\n```\n\n**参数**:\n\n| 参数      | 类型      | 必填 | 说明         |\n| --------- | --------- | ---- | ------------ |\n| citylimit | `boolean` | 是   | 是否限制城市 |\n\n**示例**:\n\n```javascript\nautocomplete.setCitylimit(true);\n```\n\n---\n\n### setTypes(types)\n\n设置结果类型过滤。\n\n```typescript\nsetTypes(types: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明                        |\n| ----- | -------- | ---- | --------------------------- |\n| types | `string` | 是   | 类型过滤（如 'all'、'bus'） |\n\n**示例**:\n\n```javascript\nautocomplete.setTypes('bus');\n```\n\n---\n\n### show()\n\n显示下拉列表。\n\n```typescript\nshow(): void\n```\n\n---\n\n### hide()\n\n隐藏下拉列表。\n\n```typescript\nhide(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### suggest\n\n实时搜索建议更新时触发。\n\n```typescript\nautocomplete.on('suggest', (suggestions: PlaceAutocompleteEventSuggestion[]) => {\n    console.log('搜索建议:', suggestions);\n});\n```\n\n**回调参数**: `PlaceAutocompleteEventSuggestion[]` - 建议列表\n\n---\n\n### select\n\n用户选中某个建议时触发。\n\n```typescript\nautocomplete.on('select', (suggestion: PlaceAutocompleteEventSuggestion) => {\n    console.log('选中:', suggestion);\n\n    // 通常在 select 事件中触发 PlaceSearch 检索\n    if (suggestion.point) {\n        search.searchNearby(suggestion.name, suggestion.point, 1000);\n    } else {\n        search.search(suggestion.name);\n    }\n});\n```\n\n**回调参数**: `PlaceAutocompleteEventSuggestion` - 选中的建议项\n\n**典型使用场景**:\n- 将选中的地点传递给 `PlaceSearch` 组件进行详细检索\n- 在地图上添加标记\n- 更新地图中心点\n\n---\n\n### highlight\n\n用户通过键盘上下键切换高亮项时触发。\n\n```typescript\nautocomplete.on('highlight', (event: { from: HighlightItem | null, to: HighlightItem }) => {\n    console.log('高亮切换:', event);\n});\n```\n\n**回调参数**: 包含 `from`（上一个高亮项）和 `to`（当前高亮项）的对象\n\n---\n\n## 类型定义\n\n### PlaceAutocompleteEventSuggestion\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceAutocompleteEventSuggestion {\n    province: string; // 省份\n    city: string; // 城市\n    district: string; // 区县\n    name: string; // POI 名称（如\"京酱肉丝\"、\"百度大厦\"）\n    street: string; // @deprecated 使用 name 字段代替，为兼容旧版保留\n    business: string; // 商圈\n    address: string; // 地址\n    tag?: string; // 标签\n    point?: BMapGL.Point; // 坐标（部分建议可能没有坐标）\n    uid?: string; // POI 唯一标识\n}\n```\n\n### HighlightItem\n\n高亮切换事件数据。\n\n```typescript\ninterface HighlightItem {\n    index: number; // 高亮项在列表中的索引\n    value: PlaceAutocompleteEventSuggestion; // 高亮项数据\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport BMapUIKit from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n\n// 创建自动补全组件\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    placeholder: '搜索地点',\n    location: '北京',\n    citylimit: false,\n});\n\n// 监听建议更新\nautocomplete.on('suggest', suggestions => {\n    console.log('搜索建议:', suggestions);\n});\n\n// 监听用户选中\nautocomplete.on('select', suggestion => {\n    console.log('选中:', suggestion);\n});\n```\n\n---\n\n### 与 PlaceSearch 联动\n\n```javascript\nimport BMapUIKit from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n\n// 自动补全组件\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    placeholder: '搜索地点',\n    debounce: 300,\n    location: '北京',\n});\n\n// 搜索结果展示组件\nconst search = new BMapUIKit.PlaceSearch('#search-results', {\n    map,\n    pageCapacity: 10,\n});\n\n// 详情展示组件\nconst detail = new BMapUIKit.PlaceDetail('#detail-panel', {\n    map,\n});\n\n// 选中建议后触发搜索\nautocomplete.on('select', suggestion => {\n    if (!suggestion) return;\n\n    // 构建搜索关键词\n    const keyword = suggestion.name || suggestion.address || autocomplete.getInputValue();\n\n    if (suggestion.point) {\n        // 如果有坐标，使用周边搜索\n        search.searchNearby(keyword, suggestion.point, 1000);\n    } else {\n        // 否则使用关键词搜索\n        search.search(keyword);\n    }\n});\n\n// 搜索结果选中后展示详情\nsearch.on('select', poi => {\n    if (poi && poi.uid) {\n        detail.setPlace(poi.uid);\n    }\n});\n```\n\n---\n\n### 动态切换城市\n\n```javascript\nconst autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n    map,\n    location: '北京',\n    citylimit: false,\n});\n\n// 切换搜索城市\ndocument.getElementById('city-select').addEventListener('change', (e) => {\n    const city = e.target.value;\n    autocomplete.setLocation(city);\n\n    // 同步移动地图到对应城市\n    const cityCenters = {\n        '北京': [116.404, 39.915],\n        '上海': [121.473, 31.230],\n        '广州': [113.264, 23.129],\n    };\n    const coords = cityCenters[city];\n    if (coords) {\n        map.centerAndZoom(new BMapGL.Point(coords[0], coords[1]), 14);\n    }\n});\n\n// 切换城市限制\ndocument.getElementById('citylimit-check').addEventListener('change', (e) => {\n    autocomplete.setCitylimit(e.target.checked);\n});\n```\n\n---\n\n### 键盘导航支持\n\nPlaceAutocomplete 组件内置了完整的键盘导航支持：\n\n- **↓ (ArrowDown)**: 向下选择建议项\n- **↑ (ArrowUp)**: 向上选择建议项\n- **Enter**: 确认选中当前高亮的建议项\n- **Escape**: 关闭下拉列表\n\n```javascript\nautocomplete.on('highlight', ({ from, to }) => {\n    console.log(`高亮从 ${from?.index} 切换到 ${to.index}`);\n    console.log('当前高亮项:', to.value.name);\n});\n\nautocomplete.on('select', suggestion => {\n    console.log('用户确认选中:', suggestion.name);\n});\n```\n\n---\n\n## 完整示例 HTML\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <title>PlaceAutocomplete 示例</title>\n  <style>\n    #map { width: 100%; height: 500px; }\n    #autocomplete-container { width: 300px; margin: 20px; }\n  </style>\n</head>\n<body>\n  <div id=\"autocomplete-container\"></div>\n  <div id=\"map\"></div>\n\n  <script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n  <script type=\"module\">\n    import BMapUIKit from '@baidumap/jsapi-ui-kit';\n\n    const map = new BMapGL.Map('map');\n    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);\n    map.enableScrollWheelZoom(true);\n\n    const autocomplete = new BMapUIKit.PlaceAutocomplete('#autocomplete-container', {\n        map,\n        placeholder: '搜索地点',\n        location: '北京',\n    });\n\n    autocomplete.on('select', suggestion => {\n        console.log('选中:', suggestion);\n        if (suggestion.point) {\n            map.centerAndZoom(suggestion.point, 16);\n            const marker = new BMapGL.Marker(suggestion.point);\n            map.addOverlay(marker);\n        }\n    });\n  </script>\n</body>\n</html>\n```\n\n---\n\n## 注意事项\n\n1. **必须先加载百度地图 API**: 确保在使用组件前已加载 BMap 或 BMapGL\n2. **防抖优化**: 默认 300ms 防抖延迟，避免频繁请求。可通过 `debounce` 参数调整\n3. **移动端适配**: 组件会自动检测设备类型，移动端建议列表默认显示 6 条，PC 端 10 条\n4. **城市设置**:\n   - `location` 为空时，使用地图中心所在城市\n   - `citylimit: true` 时，严格限制在指定城市内搜索\n5. **坐标可用性**: 并非所有建议都包含坐标（`point`），使用前需判断\n6. **与 PlaceSearch 联动**: 选中建议后通常需要触发 PlaceSearch 进行详细检索\n7. **内存管理**: 组件销毁时会自动清理所有事件监听器和 DOM 元素\n\nFile v1.0.2:references/place-detail.md\n\n# PlaceDetail 地点详情组件\n\n## 构造函数\n\n```typescript\nnew PlaceDetail(container: string | HTMLElement, options: PlaceDetailOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceDetailOptions`    | 是   | 配置选项              |\n\n**PlaceDetailOptions**:\n\n```typescript\ninterface PlaceDetailOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    layout?: 'default' | 'compact'; // 布局模式，默认 'default'\n    display?: PlaceDetailDisplayOptions;\n}\n\ninterface PlaceDetailDisplayOptions {\n    image?: boolean; // 显示图片\n    title?: boolean; // 显示标题\n    type?: boolean; // 显示类型\n    address?: boolean; // 显示地址\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n    website?: boolean; // 显示网址\n}\n```\n\n**布局模式**:\n\n| 值          | 说明                       |\n| ----------- | -------------------------- |\n| `'default'` | 详细竖向布局，适合侧边栏   |\n| `'compact'` | 紧凑横向布局，适合底部面板 |\n\n---\n\n## 方法\n\n### setPlace(uidOrPoi)\n\n加载并展示地点详情。\n\n```typescript\nsetPlace(uidOrPoi: string | LocalResultPoiType): void\n```\n\n**参数**:\n\n| 参数     | 类型                 | 必填 | 说明        |\n| -------- | -------------------- | ---- | ----------- |\n| uidOrPoi | `string`             | 是   | POI 的 UID  |\n| uidOrPoi | `LocalResultPoiType` | 是   | 或 POI 对象 |\n\n**示例**:\n\n```javascript\n// 通过 UID 加载（会发起网络请求）\ndetail.setPlace('abc123uid');\n\n// 通过 POI 对象直接展示（无网络请求）\ndetail.setPlace({\n    name: '天安门',\n    address: '北京市东城区',\n    point: {lng: 116.404, lat: 39.915},\n    tel: '010-12345678',\n});\n```\n\n---\n\n### clear()\n\n清空详情面板，显示空状态。\n\n```typescript\nclear(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n详情加载完成时触发。\n\n```typescript\ndetail.on('load', (data: PlaceDetailEventData) => {\n    console.log('详情:', data.title, data.address);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceDetailEventData\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceDetailEventData {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: {lng: number; lat: number}; // 坐标\n    tel?: string; // 电话\n}\n```\n\n### LocalResultPoiType\n\n传入 `setPlace()` 的 POI 对象类型（来自 BMap API）。\n\n```typescript\n// 参考 BMap.LocalResultPoi\ninterface LocalResultPoiType {\n    name?: string;\n    title?: string;\n    addr?: string;\n    address?: string;\n    uid?: string;\n    point?: {lng: number; lat: number};\n    tel?: string;\n    // ... 其他字段\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst detail = new PlaceDetail('#detail-panel', {map});\n\ndetail.on('load', (data) => {\n    console.log('加载完成:', data.title);\n});\n\n// 加载详情\ndetail.setPlace('poi_uid_string');\n```\n\n### 配置显示字段\n\n```javascript\nconst detail = new PlaceDetail('#panel', {\n    map,\n    layout: 'compact',\n    display: {\n        image: true,\n        title: true,\n        address: true,\n        phone: true,\n        rating: false,\n        website: false,\n    },\n});\n```\n\n### 与 PlaceSearch 联动\n\n```javascript\nimport {PlaceSearch, PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst search = new PlaceSearch('#search', {map});\nconst detail = new PlaceDetail('#detail', {map});\n\n// 点击搜索结果时展示详情\nsearch.on('select', (poi) => {\n    if (poi.uid) {\n        detail.setPlace(poi.uid);\n    } else {\n        // 没有 UID 时直接展示已有信息\n        detail.setPlace(poi);\n    }\n});\n```\n\n### 动态切换布局\n\n```javascript\n// 根据屏幕宽度选择布局\nconst layout = window.innerWidth < 768 ? 'compact' : 'default';\nconst detail = new PlaceDetail('#panel', {map, layout});\n```\n\nFile v1.0.2:references/place-search.md\n\n# PlaceSearch 地点检索组件\n\n## 构造函数\n\n```typescript\nnew PlaceSearch(container: string | HTMLElement, options: PlaceSearchOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceSearchOptions`    | 是   | 配置选项              |\n\n**PlaceSearchOptions**:\n\n```typescript\ninterface PlaceSearchOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    pageCapacity?: number; // 每页结果条数，默认 10\n    pageNum?: number; // 页码，默认 0\n    display?: PlaceSearchDisplayOptions;\n}\n\ninterface PlaceSearchDisplayOptions {\n    title?: boolean; // 显示标题\n    address?: boolean; // 显示地址\n    type?: boolean; // 显示类型\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n}\n```\n\n---\n\n## 方法\n\n### search(keyword, option?)\n\n关键字检索。\n\n```typescript\nsearch(keyword: string, option?: { city?: string }): Promise<void>\n```\n\n**参数**:\n\n| 参数        | 类型     | 必填 | 说明             |\n| ----------- | -------- | ---- | ---------------- |\n| keyword     | `string` | 是   | 检索关键字       |\n| option.city | `string` | 否   | 城市名称（预留） |\n\n**示例**:\n\n```javascript\nawait search.search('餐厅');\nawait search.search('咖啡', {city: '北京'});\n```\n\n---\n\n### searchNearby(keyword, center, radius?)\n\n周边检索。\n\n```typescript\nsearchNearby(\n  keyword: string,\n  center: BMap.Point | BMapGL.Point,\n  radius?: number\n): Promise<void>\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明                  |\n| ------- | -------- | ---- | --------------------- |\n| keyword | `string` | 是   | 检索关键字            |\n| center  | `Point`  | 是   | 圆心坐标              |\n| radius  | `number` | 否   | 半径（米），默认 2000 |\n\n**示例**:\n\n```javascript\nconst center = new BMapGL.Point(116.404, 39.915);\nawait search.searchNearby('酒店', center, 1000);\n```\n\n---\n\n### searchInBounds(keyword, bounds)\n\n范围检索。\n\n```typescript\nsearchInBounds(\n  keyword: string,\n  bounds: { sw: BMapGL.Point, ne: BMapGL.Point }\n): Promise<void>\n```\n\n**参数**:\n\n| 参数      | 类型     | 必填 | 说明       |\n| --------- | -------- | ---- | ---------- |\n| keyword   | `string` | 是   | 检索关键字 |\n| bounds    | `object` | 是   | 矩形范围   |\n| bounds.sw | `Point`  | 是   | 西南角坐标 |\n| bounds.ne | `Point`  | 是   | 东北角坐标 |\n\n**示例**:\n\n```javascript\nawait search.searchInBounds('商场', {\n    sw: new BMapGL.Point(116.3, 39.8),\n    ne: new BMapGL.Point(116.5, 40.0),\n});\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n检索完成时触发。\n\n```typescript\nsearch.on('load', (list: PlaceSearchEventPoi[]) => {\n    console.log('检索结果:', list);\n});\n```\n\n### select\n\n用户点击列表项时触发。\n\n```typescript\nsearch.on('select', (poi: PlaceSearchEventPoi) => {\n    console.log('选中:', poi.title, poi.point);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceSearchEventPoi\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceSearchEventPoi {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: BMapGL.Point; // 坐标\n    tel?: string; // 电话\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceSearch} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst search = new PlaceSearch('#search-panel', {map});\n\nsearch.on('load', (list) => {\n    console.log(`共 ${list.length} 条结果`);\n});\n\nsearch.on('select', (poi) => {\n    map.centerAndZoom(poi.point, 16);\n});\n\nsearch.search('美食');\n```\n\n### 配置显示字段\n\n```javascript\nconst search = new PlaceSearch('#panel', {\n    map,\n    pageCapacity: 5,\n    display: {\n        title: true,\n        address: true,\n        phone: true,\n        rating: false,\n        openingHours: false,\n    },\n});\n```\n\n### 周边检索联动\n\n```javascript\n// 点击地图时，在点击位置周边检索\nmap.addEventListener('click', (e) => {\n    search.searchNearby('餐厅', e.latlng, 500);\n});\n```\n\nFile v1.0.2:references/route-plan.md\n\n# RoutePlan 路径规划组件\n\n路径规划 UI 组件，封装百度地图路径规划服务，提供统一的 API 和归一化的数据格式。\n\n> **注意**: 目前仅开放**驾车**路径规划功能。公交、骑行、步行等后续会陆续开放。\n\n## 构造函数\n\n```typescript\nnew RoutePlan(container: string | HTMLElement, options: RoutePlanOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `RoutePlanOptions`      | 是   | 配置选项              |\n\n**RoutePlanOptions**:\n\n```typescript\ninterface RoutePlanOptions {\n    /** 地图实例，必传 */\n    map: BMap.Map | BMapGL.Map;\n    /** 驾车配置 */\n    drivingOptions?: DrivingOptions;\n}\n\ninterface DrivingOptions {\n    /** 驾车策略，默认 DEFAULT (0) */\n    policy?: DrivingPolicy;\n    /** 是否返回备选路线：0-返回一条推荐路线，1-返回1-3条路线供选择，默认 0 */\n    alternatives?: 0 | 1;\n}\n```\n\n\n## 导入方式\n\n```typescript\nimport {\n    RoutePlan,\n    DrivingPolicy,\n    // 以下暂未开放\n    TransitPolicy,\n    IntercityPolicy,\n    TransitTypePolicy,\n    LineType,\n} from '@baidumap/jsapi-ui-kit';\n\n// 类型导入\nimport type {\n    RoutePlanOptions,\n    RoutePlanType,\n    RoutePlanSearchOptions,\n    RoutePlanEventData,\n    NormalizedRouteResult,\n    NormalizedPlan,\n    NormalizedPoint,\n    NormalizedLocation,\n    Segment,\n    DriveSegment,\n} from '@baidumap/jsapi-ui-kit';\n```\n\n## 驾车策略枚举\n\n```typescript\nenum DrivingPolicy {\n    DEFAULT = 0,                        // 默认策略\n    LEAST_DISTANCE = 2,                 // 距离最短（不考虑限行和路况，用于估价场景）\n    AVOID_HIGHWAYS = 3,                 // 不走高速\n    FIRST_HIGHWAYS = 4,                 // 高速优先\n    AVOID_CONGESTION = 5,               // 躲避拥堵\n    AVOID_PAY = 6,                      // 少收费\n    HIGHWAYS_AVOID_CONGESTION = 7,      // 高速优先+躲避拥堵\n    AVOID_HIGHWAYS_CONGESTION = 8,      // 不走高速+躲避拥堵\n    AVOID_CONGESTION_PAY = 9,           // 躲避拥堵+少收费\n    AVOID_HIGHWAYS_CONGESTION_PAY = 10, // 不走高速+躲避拥堵+少收费\n    AVOID_HIGHWAYS_PAY = 11,            // 不走高速+少收费\n    DISTANCE_PRIORITY = 12,             // 距离优先（考虑限行和路况，距离相对短但不一定稳定）\n    TIME_PRIORITY = 13,                 // 时间优先\n}\n```\n\n\n## 方法\n\n### search(searchOptions)\n\n发起路径规划搜索。\n\n```typescript\nsearch(searchOptions: RoutePlanSearchOptions): Promise<NormalizedRouteResult>\n```\n\n**RoutePlanSearchOptions**:\n\n| 参数      | 类型              | 必填 | 说明                                   |\n| --------- | ----------------- | ---- | -------------------------------------- |\n| start     | `Point`           | 是   | 起点坐标                               |\n| end       | `Point`           | 是   | 终点坐标                               |\n| startName | `string`          | 否   | 起点名称（用于外部导航展示）           |\n| endName   | `string`          | 否   | 终点名称（用于外部导航展示）           |\n| startUid  | `string`          | 否   | 起点POI的UID，填写后将提升路线规划的准确性 |\n| endUid    | `string`          | 否   | 终点POI的UID，填写后将提升路线规划的准确性 |\n| waypoints | `Point[]`         | 否   | 途经点数组（驾车最多 10 个）           |\n\n**示例**:\n\n```javascript\n// 基础用法\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n});\n\n// 带途经点\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n    waypoints: [\n        new BMapGL.Point(116.35, 39.95),\n    ],\n});\n\n// 带UID提升准确性\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n    startUid: 'xxx',\n    endUid: 'yyy',\n});\n\n// 填写起终点名称\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    startName: '北京西站',\n    startUid: 'xxx',\n    end: new BMapGL.Point(116.305, 39.982),\n    endName: '西直门',\n    endUid: 'yyy',\n});\n```\n\n### clear()\n\n清空搜索结果和地图覆盖物。\n\n```typescript\nclear(): void\n```\n\n### getCurrentType()\n\n获取当前路径规划类型。\n\n```typescript\ngetCurrentType(): RoutePlanType\n```\n\n**返回值**: `'driving'` | `'transit'` | `'riding'` | `'walking'`\n\n### getLastResult()\n\n获取上次搜索的归一化结果。\n\n```typescript\ngetLastResult(): NormalizedRouteResult | null\n```\n\n### destroy()\n\n销毁组件，清理 DOM、事件和地图覆盖物。\n\n```typescript\ndestroy(): void\n```\n\n\n### on(event, handler)\n\n注册事件监听。\n\n```typescript\non(event: string, handler: Function): this\n```\n\n\n### off(event, handler?)\n\n移除事件监听。\n\n```typescript\noff(event: string, handler?: Function): this\n```\n\n\n## 事件\n\n| 事件名      | 触发时机               | 回调参数                                    |\n| ----------- | ---------------------- | ------------------------------------------- |\n| `result`    | 搜索成功               | `RoutePlanEventData`                        |\n| `error`     | 搜索失败               | `Error`                                     |\n| `typechange`| 路径类型切换           | `{ type: RoutePlanType }`                   |\n| `planselect`| 方案选中（展开详情）   | `{ type, planIndex, plan }`                 |\n| `clear`     | 清空结果               | 无                                          |\n| `navclick`  | 点击\"开始导航\"按钮     | `{ type, result, planIndex, plan }`         |\n\n**示例**:\n\n```javascript\n// 监听搜索结果\nroutePlan.on('result', (data) => {\n    console.log('起点:', data.start.title);\n    console.log('终点:', data.end.title);\n    console.log('方案数量:', data.plans.length);\n});\n\n// 监听错误\nroutePlan.on('error', (err) => {\n    console.error('路径规划失败:', err.message);\n});\n\n// 监听方案切换\nroutePlan.on('planselect', (data) => {\n    console.log('选中方案:', data.planIndex);\n    console.log('距离:', data.plan.distanceText);\n    console.log('时长:', data.plan.durationText);\n});\n\n// 监听导航调起\nroutePlan.on('navclick', (data) => {\n    // 可在此处理跳转百度地图 App 进行导航\n    console.log('调起导航', data);\n});\n```\n\n\n## 类型定义\n\n### RoutePlanEventData\n\n```typescript\ninterface RoutePlanEventData {\n    /** 路径规划类型 */\n    type: RoutePlanType;\n    /** 起点信息 */\n    start: NormalizedPoint;\n    /** 终点信息 */\n    end: NormalizedPoint;\n    /** 方案数组 */\n    plans: NormalizedPlan[];\n}\n```\n\n### NormalizedRouteResult\n\n```typescript\ninterface NormalizedRouteResult {\n    /** 路径规划类型 */\n    routeType: RoutePlanType;\n    /** 起点信息 */\n    start: NormalizedPoint;\n    /** 终点信息 */\n    end: NormalizedPoint;\n    /** 方案数组 */\n    plans: NormalizedPlan[];\n}\n```\n\n### NormalizedPlan\n\n```typescript\ninterface NormalizedPlan {\n    /** 总距离（米） */\n    distance: number;\n    /** 距离文本 */\n    distanceText: string;\n    /** 总时长（秒） */\n    duration: number;\n    /** 时长文本 */\n    durationText: string;\n    /** 路段数组 */\n    segments: Segment[];\n\n    // 驾车特有字段\n    /** 过路费（元） */\n    toll?: number;\n    /** 收费路段距离（米） */\n    tollDistance?: number;\n    /** 红绿灯个数 */\n    trafficLights?: number;\n    /** 路况/方案特点摘要，如「一路畅通|时间少」 */\n    tag?: string;\n    /** 途经点数组 */\n    waypoints?: string[];\n    /** 完整路径坐标点 */\n    path?: NormalizedLocation[];\n}\n```\n\n### NormalizedPoint\n\n```typescript\ninterface NormalizedPoint {\n    /** 地点名称 */\n    title: string;\n    /** 坐标位置 */\n    location: NormalizedLocation;\n    /** 所属城市 */\n    city?: string;\n    /** UID */\n    uid?: string;\n}\n```\n\n### NormalizedLocation\n\n```typescript\ninterface NormalizedLocation {\n    /** 经度 */\n    lng: number;\n    /** 纬度 */\n    lat: number;\n}\n```\n\n### DriveSegment\n\n```typescript\ninterface DriveSegment extends BaseSegment {\n    type: 'drive';\n    /** 路段描述 */\n    description: string;\n    /** 起点位置 */\n    location: NormalizedLocation;\n    /** 道路名称 */\n    roadName?: string;\n    /** 行驶时长（秒） */\n    duration?: number;\n}\n```\n\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport { RoutePlan, DrivingPolicy } from '@baidumap/jsapi-ui-kit';\n\n// 初始化地图\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 创建路径规划组件\nconst routePlan = new RoutePlan('#route-panel', {\n    map: map,\n    drivingOptions: {\n        policy: DrivingPolicy.AVOID_CONGESTION,\n        alternatives: 1,  // 返回 1-3 条备选路线\n    },\n});\n\n// 发起搜索\nawait routePlan.search({\n    start: new BMapGL.Point(116.404, 39.915),\n    end: new BMapGL.Point(116.305, 39.982),\n});\n```\n\n### 配合地点搜索组件使用\n\n```javascript\nimport { RoutePlan, PlaceAutocomplete, PlaceSearch } from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 起点输入框\nconst startInput = new PlaceAutocomplete('#start-input', { map });\n// 终点输入框\nconst endInput = new PlaceAutocomplete('#end-input', { map });\n\n// 路径规划组件\nconst routePlan = new RoutePlan('#result-panel', { map });\n\n// 存储选中的起终点\nlet startPoint, endPoint;\n\nstartInput.on('select', (poi) => {\n    startPoint = poi.point;\n    trySearch();\n});\n\nendInput.on('select', (poi) => {\n    endPoint = poi.point;\n    trySearch();\n});\n\nfunction trySearch() {\n    if (startPoint && endPoint) {\n        routePlan.search({\n            start: startPoint,\n            end: endPoint,\n        });\n    }\n}\n```\n\n### 自定义地图绘制\n\n```javascript\nconst routePlan = new RoutePlan('#panel', { map });\n\nconst overlays = [];\n\nfunction clearOverlays() {\n    overlays.forEach(o => map.removeOverlay(o));\n    overlays.length = 0;\n}\n\nfunction drawRoute(plan) {\n    if (plan.path && plan.path.length > 0) {\n        const points = plan.path.map(pt => new BMapGL.Point(pt.lng, pt.lat));\n        const polyline = new BMapGL.Polyline(points, {\n            strokeColor: '#22c55e',\n            strokeWeight: 8,\n            strokeOpacity: 0.8,\n        });\n        map.addOverlay(polyline);\n        overlays.push(polyline);\n    }\n}\n\nfunction addMarker(location, label, color) {\n    const point = new BMapGL.Point(location.lng, location.lat);\n    const marker = new BMapGL.Marker(point);\n    map.addOverlay(marker);\n    overlays.push(marker);\n}\n\nroutePlan.on('result', (data) => {\n    clearOverlays();\n    const plan = data.plans[0];\n    if (plan) {\n        drawRoute(plan);\n        addMarker(data.start.location, '起', '#0f9977');\n        addMarker(data.end.location, '终', '#e53935');\n    }\n});\n\nroutePlan.on('planselect', (data) => {\n    clearOverlays();\n    drawRoute(data.plan);\n    const result = routePlan.getLastResult();\n    if (result) {\n        addMarker(result.start.location, '起', '#0f9977');\n        addMarker(result.end.location, '终', '#e53935');\n    }\n});\n```\n\n## 注意事项\n\n1. **坐标点必填**: start 和 end 参数必须是坐标点（Point），不支持地点名称\n2. **途经点限制**: 驾车路径规划最多支持 10 个途经点（起终点除外）\n3. **组件销毁**: 组件销毁时会自动清理所有事件监听器和地图覆盖物\n4. **地图依赖**: 必须先加载百度地图 JS API（BMap 或 BMapGL）","readmeExcerpt":"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","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"references/getting-started.md"},{"language":"bash","snippet":"npm install @baidumap/jsapi-ui-kit"},{"language":"javascript","snippet":"import { PlaceSearch, PlaceDetail } from '@baidumap/jsapi-ui-kit';\nimport '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';"},{"language":"html","snippet":"<link rel=\"stylesheet\" href=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css\">\n<script src=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js\"></script>"},{"language":"html","snippet":"<script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>"},{"language":"javascript","snippet":"// 1. 初始化地图\nconst map = new BMapGL.Map('map-container');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 2. 创建检索组件\nconst search = new BMapUIKit.PlaceSearch('#search-panel', { map });\n\n// 3. 监听事件\nsearch.on('select', (poi) => {\n  console.log('选中:', poi.title);\n});\n\n// 4. 执行检索\nsearch.search('餐厅');"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: jsapi-ui-kit\ndescription: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。\nversion: 1.0.1\nmetadata:\n  openclaw:\n    requires:\n      env: BMAP_JSAPI_KEY\n    primaryEnv: BMAP_JSAPI_KEY\n---\n\n# 百度地图 jsapi-ui-kit\n\n轻量级百度地图 UI 组件库，提供地点自动补全、地点检索、详情展示和路径规划能力。\n\n## 什么时候使用\n\n- 希望快速集成标准化的地图 UI 组件，无需从零开发\n- 需要在地图应用中添加搜索输入框自动补全功能\n- 需要在地图应用中添加地点搜索功能\n- 需要展示 POI 详情信息（名称、地址、电话等）\n- 需要实现驾车路径规划功能（支持多方案、途经点）\n\n## 文档导航\n\n- **[快速开始](references/getting-started.md)** - 安装、引入方式、基础示例\n- **[PlaceAutocomplete 地点自动补全](references/place-autocomplete.md)** - 搜索输入框实时建议\n- **[PlaceSearch 地点检索](references/place-search.md)** - 关键字/周边/范围检索\n- **[PlaceDetail 地点详情](references/place-detail.md)** - POI 详情展示\n- **[RoutePlan 路径规划](references/route-plan.md)** - 驾车路径规划（多方案、途经点、导航调起）\n\n## 如何使用\n\n根据用户问题查询文档导航，参考详细文档内容和API设计： \n```\nreferences/getting-started.md\n```\n每个参考文件包含：\n\n- 功能简要说明\n- 完整代码示例及解释\n- API 参数说明和注意事项\n\n## 注意事项\n\n- 必须先加载百度地图 JS API（BMap 或 BMapGL）"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn778b6bf766ym71fdvrc5yvg98319rv\",\n  \"slug\": \"baidu-map-jsapi-ui-kit\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1779848949958\n}"},{"path":"references/getting-started.md","content":"# 快速开始\n\n## 安装\n\n```bash\nnpm install @baidumap/jsapi-ui-kit\n```\n\n## 引入方式\n\n### ESM 模块\n\n```javascript\nimport { PlaceSearch, PlaceDetail } from '@baidumap/jsapi-ui-kit';\nimport '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';\n```\n\n### CDN 引入\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css\">\n<script src=\"https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js\"></script>\n```\n\nCDN 方式下通过全局变量 `BMapUIKit` 访问组件。\n\n## 前置依赖\n\n使用前需先加载百度地图 JS API：\n\n```html\n<script src=\"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOUR_AK\"></script>\n```\n\n## 基础示例\n\n```javascript\n// 1. 初始化地图\nconst map = new BMapGL.Map('map-container');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\n// 2. 创建检索组件\nconst search = new BMapUIKit.PlaceSearch('#search-panel', { map });\n\n// 3. 监听事件\nsearch.on('select', (poi) => {\n  console.log('选中:', poi.title);\n});\n\n// 4. 执行检索\nsearch.search('餐厅');\n```"},{"path":"references/place-autocomplete.md","content":"# PlaceAutocomplete 地点自动补全组件\n\n## 构造函数\n\n```typescript\nnew PlaceAutocomplete(container: string | HTMLElement, options: PlaceAutocompleteOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceAutocompleteOptions` | 是   | 配置选项           |\n\n**PlaceAutocompleteOptions**:\n\n```typescript\ninterface PlaceAutocompleteOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    placeholder?: string; // 输入框占位符，默认 '搜索地点'\n    debounce?: number; // 防抖延迟（毫秒），默认 300\n    location?: string; // 检索城市，默认使用地图中心所在城市\n    citylimit?: boolean; // 是否严格限制在指定城市内，默认 false\n    types?: string; // 结果类型过滤，默认 'all'\n    minLength?: number; // 触发检索的最小字符数，默认 1\n    showSuggestion?: boolean; // 是否显示下拉建议列表，默认 true\n    suggestionCount?: number; // 建议列表最大条数，默认移动端 6 条，PC 端 10 条\n}\n```\n\n---\n\n## 方法\n\n### search(keyword)\n\n手动触发检索。\n\n```typescript\nsearch(keyword: string): void\n```\n\n**参数**:\n\n| 参数    | 类型     | 必填 | 说明       |\n| ------- | -------- | ---- | ---------- |\n| keyword | `string` | 是   | 检索关键字 |\n\n**示例**:\n\n```javascript\nautocomplete.search('百度大厦');\n```\n\n---\n\n### setInputValue(value)\n\n设置输入框的值（不触发检索）。\n\n```typescript\nsetInputValue(value: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明     |\n| ----- | -------- | ---- | -------- |\n| value | `string` | 是   | 输入值   |\n\n**示例**:\n\n```javascript\nautocomplete.setInputValue('百度大厦');\n```\n\n---\n\n### getInputValue()\n\n获取输入框当前值。\n\n```typescript\ngetInputValue(): string\n```\n\n**返回值**: 当前输入框的值\n\n**示例**:\n\n```javascript\nconst value = autocomplete.getInputValue();\nconsole.log('当前输入:', value);\n```\n\n---\n\n### setLocation(location)\n\n设置检索城市。\n\n```typescript\nsetLocation(location: string): void\n```\n\n**参数**:\n\n| 参数     | 类型     | 必填 | 说明                           |\n| -------- | -------- | ---- | ------------------------------ |\n| location | `string` | 是   | 城市名称（如 '北京'、'上海'） |\n\n**示例**:\n\n```javascript\nautocomplete.setLocation('北京');\n```\n\n---\n\n### setCitylimit(citylimit)\n\n设置是否严格限制在指定城市内搜索。\n\n```typescript\nsetCitylimit(citylimit: boolean): void\n```\n\n**参数**:\n\n| 参数      | 类型      | 必填 | 说明         |\n| --------- | --------- | ---- | ------------ |\n| citylimit | `boolean` | 是   | 是否限制城市 |\n\n**示例**:\n\n```javascript\nautocomplete.setCitylimit(true);\n```\n\n---\n\n### setTypes(types)\n\n设置结果类型过滤。\n\n```typescript\nsetTypes(types: string): void\n```\n\n**参数**:\n\n| 参数  | 类型     | 必填 | 说明                        |\n| ----- | -------- | ---- | --------------------------- |\n| types | `string` | 是   | 类型过滤（如 'all'、'bus'） |\n\n**示例**:\n\n```javascript\nautocomplete.setTypes('bus');\n```\n\n---\n\n### show()\n\n显示下拉列表。\n\n```typescript\nshow(): void\n```\n\n---\n\n### hide()\n\n隐藏下拉列表。\n\n```typescript\nhide(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### suggest\n\n实时搜索建议更新时触发。\n\n```typescript\nautocomplete.on('suggest', (suggestions: PlaceAutocompleteEventSuggestion[]) => {\n    console.log('搜索建议:', suggestio"},{"path":"references/place-detail.md","content":"# PlaceDetail 地点详情组件\n\n## 构造函数\n\n```typescript\nnew PlaceDetail(container: string | HTMLElement, options: PlaceDetailOptions)\n```\n\n**参数**:\n\n| 参数      | 类型                    | 必填 | 说明                  |\n| --------- | ----------------------- | ---- | --------------------- |\n| container | `string \\| HTMLElement` | 是   | 容器元素或 CSS 选择器 |\n| options   | `PlaceDetailOptions`    | 是   | 配置选项              |\n\n**PlaceDetailOptions**:\n\n```typescript\ninterface PlaceDetailOptions {\n    map: BMap.Map | BMapGL.Map; // 地图实例（必填）\n    theme?: string; // 主题名称，默认 'default'\n    layout?: 'default' | 'compact'; // 布局模式，默认 'default'\n    display?: PlaceDetailDisplayOptions;\n}\n\ninterface PlaceDetailDisplayOptions {\n    image?: boolean; // 显示图片\n    title?: boolean; // 显示标题\n    type?: boolean; // 显示类型\n    address?: boolean; // 显示地址\n    phone?: boolean; // 显示电话\n    rating?: boolean; // 显示评分\n    openingHours?: boolean; // 显示营业时间\n    website?: boolean; // 显示网址\n}\n```\n\n**布局模式**:\n\n| 值          | 说明                       |\n| ----------- | -------------------------- |\n| `'default'` | 详细竖向布局，适合侧边栏   |\n| `'compact'` | 紧凑横向布局，适合底部面板 |\n\n---\n\n## 方法\n\n### setPlace(uidOrPoi)\n\n加载并展示地点详情。\n\n```typescript\nsetPlace(uidOrPoi: string | LocalResultPoiType): void\n```\n\n**参数**:\n\n| 参数     | 类型                 | 必填 | 说明        |\n| -------- | -------------------- | ---- | ----------- |\n| uidOrPoi | `string`             | 是   | POI 的 UID  |\n| uidOrPoi | `LocalResultPoiType` | 是   | 或 POI 对象 |\n\n**示例**:\n\n```javascript\n// 通过 UID 加载（会发起网络请求）\ndetail.setPlace('abc123uid');\n\n// 通过 POI 对象直接展示（无网络请求）\ndetail.setPlace({\n    name: '天安门',\n    address: '北京市东城区',\n    point: {lng: 116.404, lat: 39.915},\n    tel: '010-12345678',\n});\n```\n\n---\n\n### clear()\n\n清空详情面板，显示空状态。\n\n```typescript\nclear(): void\n```\n\n---\n\n### destroy()\n\n销毁组件，清理 DOM 和事件。\n\n```typescript\ndestroy(): void\n```\n\n---\n\n## 事件\n\n### load\n\n详情加载完成时触发。\n\n```typescript\ndetail.on('load', (data: PlaceDetailEventData) => {\n    console.log('详情:', data.title, data.address);\n});\n```\n\n---\n\n## 类型定义\n\n### PlaceDetailEventData\n\n事件回调参数类型。\n\n```typescript\ninterface PlaceDetailEventData {\n    title: string; // 名称\n    address: string; // 地址\n    uid?: string; // POI 唯一标识\n    point?: {lng: number; lat: number}; // 坐标\n    tel?: string; // 电话\n}\n```\n\n### LocalResultPoiType\n\n传入 `setPlace()` 的 POI 对象类型（来自 BMap API）。\n\n```typescript\n// 参考 BMap.LocalResultPoi\ninterface LocalResultPoiType {\n    name?: string;\n    title?: string;\n    addr?: string;\n    address?: string;\n    uid?: string;\n    point?: {lng: number; lat: number};\n    tel?: string;\n    // ... 其他字段\n}\n```\n\n---\n\n## 使用示例\n\n### 基础用法\n\n```javascript\nimport {PlaceDetail} from '@baidumap/jsapi-ui-kit';\n\nconst map = new BMapGL.Map('map');\nmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);\n\nconst detail = new PlaceDetail('#detail-panel', {map});\n\ndetail.on('load', (data) => {\n    console.log('加载完成:', data.title);\n});\n\n// 加载详情\ndetail.setPlace('poi_uid_string');\n```\n\n### 配置显示字段\n\n```javascript\nconst detail = new PlaceDetail('#panel', {\n    map,\n "}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"百度地图官方 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","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":763,"uniquenessScore":51,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T12:50:54.085Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T12:50:54.085Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T15:13:17.226Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}