1. 初始化PlaceSearch
- 使用
new AMap.PlaceSearch初始化placeSearch实例 - 可以使用city与citylimit配置来限定搜索结果在指定的城市范围内
let $placeSearch = null
function initPlaceSearch() {$placeSearch = new AMap.PlaceSearch({pageSize: 30, // 每页返回的最大数据city: '北京市', // 可以写 "北京市" 或者 "500000"citylimit: true // 设为 true 时，限制在该城市范围内})setPlaceSearchCallback() // 设定PlaceSearch的成功与失败回调
}
2. 设定与去除PlaceSearch的成功与失败回调
- 通过实例来调用on与off方法, 最好把回调函数单独提取出来, 这样便于在页面关闭时取消监听
// PlaceSearch的获取结果类型
export interface IPlaceSearchResult {info: 'OK' | "NO_DATA",poiList: {count: numberpageIndex: numberpageSize: numberpois: {address: string,distance: string,id: string,location: {KL: number,kT: number,lat: number,lng: number,pos: [number, number],className: string},name: string,shopinfo: string,tel: string,type: string}[],type: 'complete' | 'error'}
}
function setPlaceSearchCallback() {$placeSearch.on('complete', onPlaceSearchComplete)$placeSearch.on('error', onPlaceSearchError)
}
function removePlaceSearchCallback() {$placeSearch.off('complete', onPlaceSearchComplete)$placeSearch.off('error', onPlaceSearchError)
}
2.1 搜索成功回调
function onPlaceSearchComplete(result: IPlaceSearch) {// 1. 搜索成功并且有数据if (result.info === 'OK') {// 在这里编写获取数据逻辑}// 2. 搜索成功但没有搜索到值, 或者已经拿到全部的数据else if (result.info === 'NO_DATA') {}
}
3. 执行查询
$placeSearch.setPageIndex(page) // 每次执行搜索前都要设置搜索页码
$placeSearch.search(searchValue) // 通过调用search方法并传入搜索值即可执行搜索