高德地圖POI搜索
參考:《輸入提示與POI搜索》
輸入提示插件 & POI搜索插件
- 輸入提示插件:
AMap.Autocomplete
- POI搜索插件:
AMap.PlaceSearch
實(shí)際應(yīng)用中會(huì)將輸入提示插件和POI搜索插件結(jié)合使用
輸入提示和POI搜索插件結(jié)合使用
演示:高德地圖 - 輸入提示和POI搜索插件結(jié)合使用
通常Autocomplete
和PlaceSearch
結(jié)合使用庸娱,使用時(shí)只需在select
事件的響應(yīng)函數(shù)中調(diào)用PlaceSearch
的相關(guān)查詢方法,這里我們使用PlaceSearch
包裝好的map
屬性來(lái)實(shí)現(xiàn)POI搜索結(jié)果的顯示:
let map = new AMap.Map('mapContainer', {
resizeEnable: true,
// center: [116.397428, 39.90923],//地圖中心點(diǎn)
// zoom: 13,//地圖顯示的縮放級(jí)別
// keyboardEnable: false
});
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
let autoOptions = {
// city: "北京", //城市松申,默認(rèn)全國(guó)
input: 'keyword'
};
let autocomplete = new AMap.Autocomplete(autoOptions);
let placeSearch = new AMap.PlaceSearch({
// city:'北京',
map
});
AMap.event.addListener(autocomplete, 'select', (e) => {
// TODO 針對(duì)選中的POI實(shí)現(xiàn)自己的功能
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name);
});
// 以下加入POI后生成的marker的點(diǎn)擊事件代碼
});
另外默辨,加上POI搜索以后生成的marker的點(diǎn)擊事件,用于獲取經(jīng)緯度:
// POI后生成的marker的點(diǎn)擊事件
AMap.event.addListener(placeSearch, 'markerClick', (e) => {
let location = e.data.location;
setTimeout(() => {
alert(`名稱:${e.data.name}\n經(jīng)緯度:${location.lng},${location.lat}`);
}, 800);
});