@bdh-gis/mapbox-gl-search
v1.0.0
Published
Search for mapbox controls
Downloads
69
Readme
🏷️ @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;
};