本文说明如何通过手动开发或AI 辅助开发使用 @baidumap/jsapi-ui-kit。AI 开发可配合Baidu Map JSAPI Skills使用，让 AI 助手在对话中引用准确的 API 与示例。

npm install @baidumap/jsapi-ui-kit

或使用 pnpm / yarn：

pnpm add @baidumap/jsapi-ui-kit
# 或
yarn add @baidumap/jsapi-ui-kit

• 百度地图 AK：在百度地图开放平台申请 AK，并在控制台启用「JavaScript API」等所需服务。

• 加载地图 API：页面需先加载百度地图 JavaScript API或JSAPI GL（WebGL 版）。例如：

<!-- 2D 地图 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>

<!-- 或 WebGL 版 -->
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK"></script>

• 地图实例：PlaceSearch、PlaceAutocomplete、RoutePlan 依赖地图实例（如城市解析、投影等），请确保传入的map已创建；PlaceDetail 按 uid 拉取详情可不依赖 map。

ESM（推荐）

import BMapUIKit from '@baidumap/jsapi-ui-kit';
import '@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css';

// 假设 map 为已创建的 BMapGL.Map 或 BMap.Map
const search = new BMapUIKit.PlaceSearch('#panel', { map: map });
search.search('北京');

按需引入

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

IIFE（无构建环境）

<script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
<link rel="stylesheet" href="https://unpkg.com/@baidumap/jsapi-ui-kit/dist/css/jsapi-ui-kit.css">
<script src="https://unpkg.com/@baidumap/jsapi-ui-kit/dist/jsapi-ui-kit.iife.js"></script>
<script>
  var search = new BMapUIKit.PlaceSearch('panel', { map: map });
  search.search('天安门');
</script>

样式需单独引入，否则组件无默认样式。

仓库内提供示例页面，便于调试与参考：

1. 克隆或下载本仓库，在项目根目录执行npm install（或pnpm install）。

2. 在index.html（或示例所用 HTML）中将YOUR_BAIDU_MAP_AK替换为你的百度地图 AK。

3. 执行：

npm start

浏览器会打开示例页，可体验 PlaceSearch、PlaceDetail、PlaceAutocomplete、RoutePlan 及主题切换。示例使用 JSAPI GL（BMapGL），地图全屏，检索面板浮层展示；修改源码后刷新即可看到效果。

通过 AI 助手（如 Claude、Cursor）开发时，可配合Baidu Map JSAPI Skills，让 AI 在回答中引用本库与百度地图 JSAPI 的准确文档与示例，减少手查文档、提高代码正确性。

JSAPI Skills是百度地图 JSAPI 的 AI 技能库，包含：

AI 会根据对话内容自动加载对应 Skill 下的参考文档，生成符合官方用法的代码。

详细步骤请参看Skill说明文档

在提问或描述需求时，提及与百度地图、本库相关的关键词，AI 会自动加载对应 Skill 的文档并据此回答，例如：

• 「用BMapGL创建一个地图，并加上PlaceSearch」

• 「jsapi-ui-kit的 PlaceDetail 怎么监听 load 事件？」

• 「用百度地图 JSAPI做地点检索，并展示详情」

• 「@baidumap/jsapi-ui-kit的 PlaceAutocomplete 如何限制城市？」

推荐在问题中直接写出「Baidu Map」「BMapGL」「jsapi-ui-kit」「PlaceSearch」「PlaceDetail」「PlaceAutocomplete」等，以便更稳定地命中 jsapi-ui-kit 与 bmap-jsapi-gl 的 Skill。