高德地图_使用PlaceSearch查找指定名称的POI

1. 初始化PlaceSearch

1. 使用new AMap.PlaceSearch初始化placeSearch实例
2. 可以使用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: number
    pageIndex: number
    pageSize: number
    pois: {
      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方法并传入搜索值即可执行搜索