@baidumap/jsapi-ui-kit

百度地图 JavaScript API 的 UI 组件库，提供地点检索、地点详情等能力。仅面向浏览器，通过 JS 调用（非 Web Component）。

安装

npm install @baidumap/jsapi-ui-kit

使用前准备

• 页面需先加载 百度地图 JavaScript API 或 JSAPI GL（WebGL 版）。
• PlaceSearch 检索依赖地图实例（用于城市/投影等），请确保传入的 map 已创建；若使用 JSAPI GL，需确保 window.BMapGL 已就绪。
• PlaceDetail 按 uid 拉取详情不依赖地图实例，map 为扩展预留。

引入方式

ESM

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

const search = new BMapUIKit.PlaceSearch('#panel', { map: map });
search.search('北京');

按需引入

import { PlaceSearch, PlaceDetail } 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>

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

组件

PlaceSearch（地点检索）

在指定容器内展示检索列表，数据通过内部 service 直接请求。组件不与地图做视野/打点联动，可由开发者监听事件后自行联动。

const search = new BMapUIKit.PlaceSearch('#panel', {
  map: map,
  pageCapacity: 10,
});

search.on('load', (list) => console.log(list));   // list: PlaceSearchEventPoi[]
search.on('select', (poi) => console.log(poi));   // poi: PlaceSearchEventPoi

search.search('北京');
search.searchNearby('餐厅', new BMapGL.Point(116.404, 39.915), 1000);
search.searchInBounds('酒店', { sw: new BMapGL.Point(116.3, 39.8), ne: new BMapGL.Point(116.5, 40) });

// 分页（仅 API，无内置翻页 UI）
search.prevPage();
search.nextPage();
search.goToPage(2);

search.destroy();

事件 payload：load 为 PlaceSearchEventPoi[]，select 为 PlaceSearchEventPoi（字段：title、address、uid、point、tel）。类型可从包内引入：import type { PlaceSearchEventPoi } from '@baidumap/jsapi-ui-kit'。

PlaceDetail（地点详情）

在指定容器内展示地点详情；按 uid 拉取详情使用内部 service。

const detail = new BMapUIKit.PlaceDetail('#detail', { map: map });

detail.on('load', (data) => console.log(data));   // data: PlaceDetailEventData

detail.setPlace(poi);   // poi 来自检索结果（含 title/address/uid 等）
detail.setPlace('uid'); // 或传入 uid 字符串，内部拉取详情
detail.clear();
detail.destroy();

事件 payload：load 为 PlaceDetailEventData（字段：title、address、uid、point、tel）。类型可从包内引入：import type { PlaceDetailEventData } from '@baidumap/jsapi-ui-kit'。

License

MIT