最近做了一個百度地圖，軌道回放，地點檢索，今天來說一下自定義地點檢索搜索功能。

地點檢索其實很簡單 首先我我們可以利用id把search和AutoComplete綁定到一起? ，輸入值后AutoComplete組件會處理當前輸入的inputValue值

?代碼示例：

1.<Search/>組件根據自己使用的組件庫修改

2.onConfirm地點檢索中下拉框的選中值的回調

3.<Autocomplete/>中input是綁定<Search/>組件id的值（官網Autocomplete給的是setInputValue,在AutocompleteOptions中有input)

百度地圖JSAPI 2.0類參考 (baidu.com)

const { Search } = Input;

<Search

? ? ? ? ? ? ? ? ? ? ? ? ? ? value={inputValue}

? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder="搜地點"

? ? ? ? ? ? ? ? ? ? ? ? ? ? allowClear

? ? ? ? ? ? ? ? ? ? ? ? ? ? size="middle"

? ? ? ? ? ? ? ? ? ? ? ? ? ? onSearch={onSearch}

? ? ? ? ? ? ? ? ? ? ? ? ? ? id="input"

? ? ? ? ? ? ? ? ? ? ? ? ? ? onChange={handleOnChange}

? ? ? ? ? ? ? ? ? ? ? ? />

<AutoComplete

? ? ? ? ? ? ? ? ? ? ? ? ? ? input="input"

? ? ? ? ? ? ? ? ? ? ? ? ? ? onConfirm={(e: any) => {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? const _value = e.item.value;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let value = '';

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (e.item.index > -1) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? value =

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _value.province + _value.city + _value.district + _value.street + _value.business;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setInputValue(value);

? ? ? ? ? ? ? ? ? ? ? ? ? ? }}

? ? ? ? ? ? ? ? ? ? ? ? />

這里只是一個大概功能，細節需求不同，可以根據上面百度jsapi去查看自己需要的方法

總結

以上是生活随笔為你收集整理的百度地图自定义搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。