<< 所有组件

🏷️ @bdh-gis/mapbox-gl-search

搜索

npm i @bdh-gis/mapbox-gl-search

import Search from '@bdh-gis/mapbox-gl-search';
import '@bdh-gis/mapbox-gl-search/src/index.css';

map.addControl(
  new Search({
    panelAlwaysOpen: false,
    locateOptions: {
      duration: 500,
      pitch: 45,
      zoom: 18,
    },
    showPopup: true,
    getPopupContentEl: (data) => {
      const content = document.createElement('div');
      const info = document.createElement('div');
      info.innerHTML = `名称：${data.name}<br/>地址：${data.address}`;

      const button = document.createElement('button');
      button.innerText = '显示坐标';
      button.onclick = () => {
        alert(data.lonlat.join(', '));
      };

      content.append(info, button);
      return content;
    },
  }),
);

Options

export type AnyEvent =
  | 'CREATE_PANEL'
  | 'CREATE_BUTTON'
  | 'PANEL_OPEN'
  | 'PANEL_CLOSE'
  | 'INPUT_CHANGE'
  | 'SEARCH'
  | 'UPDATE_RESULTS'
  | 'SELECT'
  | 'UPDATE_PRIORITY_CITIES'
  | 'SELECT_PRIORITY';
export type Options = {
  searchButton?: Utils.ButtonOptions | undefined;
  panelAlwaysOpen?: boolean | undefined;
  onEvents?: ((event: AnyEvent, data?: any) => void) | undefined;
  locateOptions?: LocateOptions | undefined;
  showPopup?: boolean | undefined;
  getPopupContentEl?: ((data: SearchResult) => HTMLDivElement) | undefined;
};
export type LocateOptions = {
  duration?: number;
  bearing?: number;
  pitch?: number;
  zoom?: number;
  padding?: mapboxgl.PaddingOptions;
};
export type SearchResult = {
  name: string;
  address: string;
  lonlat: [number, number];
};
export type PriorityCity = {
  adminCode: string;
  adminName: string;
  count: string;
};