PlaceSearch的使用

AMap.PlaceSearch 用于进行 POI（兴趣点）搜索。例如：

• 根据关键词搜索企业、商场、学校等地点
• 根据关键词 + 城市进行搜索
• 获取搜索结果中的地点名称、地址、经纬度等信息

初始化

• PlaceSearch 不需要每次搜索时重新初始化. 在高德地图实例初始化完成后, 创建一个 PlaceSearch 实例即可, 后续可重复使用这个实例执行搜索.

let placeSearch: AMap.PlaceSearch
// 初始化高德地图
const map = new AMap.Map('container')
// 初始化 PlaceSearch
placeSearch = new AMap.PlaceSearch({
  city: '全国',
  pageSize: 20,
  pageIndex: 1
})

• city: String, 兴趣点城市, 可选值: 城市名（中文或中文全拼）、citycode、adcode; 默认值: "全国"
• citylimit: Boolean, 是否强制限制在设置的城市内搜索，默认值为：false, true：强制限制设定城市，false：不强制限制设定城市

• children: Number, 是否按照层级展示子POI数据; 1: 展示子节点, 0: 不展示; 默认值: 0
• type: String, 兴趣点类别，多个类别用 | 分隔（如 "餐饮|酒店"）; 共20种分类，默认值: "餐饮服务、商务住宅、生活服务"
• lang: String, 检索语言类型; 可选值: "zh_cn"（中文简体）、"en"（英文）; 默认值: "zh_cn"
• pageSize: Number, 单页显示结果条数; 默认值: 10, 取值范围: 1~50（超出按最大值返回）
• pageIndex: Number, 页码; 默认值: 1, 取值范围: 1~100
• extensions: String, 返回结果详略; "base"：返回基本地址信息, "all"：返回基本+详细信息; 默认值: "base"
• map: AMap.Map, 展现结果的地图实例（指定后，搜索结果的标注、线路等会自动添加到此地图上）, 一般不使用, 因为默认的marker比较丑
• panel: String | HTMLElement, 结果列表的HTML容器id或容器元素（提供后结果列表将在此容器中展示）
• showCover: Boolean, 在使用map属性时，是否在地图上显示周边搜索的圆或范围搜索的多边形; 默认值: true
• renderStyle: String, 使用map或panel属性时，设定绘制的UI风格; 可选值: "newpc"（带图片展示的新样式）、"default"（原有简单样式）; 默认值: "newpc"
• autoFitView: Boolean, 搜索结束后，是否自动调整地图视野使绘制的Marker点都处于视口的可见范围

执行搜索

初始化完成之后，通过 search 方法执行关键词搜索, 同时通过对complete和error事件的监听回调函数来处理搜索结果

export interface IPlaceSearchCompleteResult {
  info: 'OK' | 'NO_DATA' //状态信息，通常为"OK"或"NO_DATA", 详情见 https://lbs.amap.com/api/javascript-api/reference/errorcode/
  poiList: {
    pois: {
      id: string // POI唯一标识, 例如"B0L3SN28D5"
      name: string // POI名称, 例如"深圳市腾娱互动科技有限公司重庆分公司"
      type: string // POI类型分类信息, 例如"公司企业;公司;公司"
      location: {
        lng: number // 经度
        lat: number // 纬度
        pos: [number, number] // 投影坐标
        KL?: number // 经度
        kT?: number // 纬度
        className: string // 类名, 比如"AMap.LngLat"
      }
      address: string // 地址, 例如"洪湖西路26号腾讯大厦"
      tel: string // 联系电话, 可能为空字符串
      distance: number //离中心点距离，仅周边查询返回, 否则为NaN
      shopinfo: string //商户信息标识，如"2"或"0"
    }[]
    count: number // 结果总数
    pageIndex: number // 当前页码（从1开始）
    pageSize: number // 每页条数
  }
  type: string //结果类型，如"complete"
}

// PlaceSearch 搜索完成
function onPlaceSearchCompleteHandler(result: IPlaceSearchCompleteResult){
  
}

// PlaceSearch 搜索错误
function onPlaceSearchErrorHandler(result: IPlaceSearchErrorResult){
  
}

placeSearch.on('complete', onPlaceSearchCompleteHandler)
placeSearch.on('error', onPlaceSearchErrorHandler)
placeSearch.search('腾讯')

动态修改搜索参数

PlaceSearch 实例支持在初始化后动态修改搜索参数，无需重新创建实例

// 动态设置POI类型，多个类型用 "|" 分隔
placeSearch.setType('餐饮|酒店|电影院');

// 动态设置城市
placeSearch.setCity('重庆市');

// 动态设置页码
placeSearch.setPageIndex(2);

// 动态设置每页条数
placeSearch.setPageSize(30);

其它搜索方法

searchNearBy - 周边搜索

根据中心点经纬度、半径以及关键字进行周边查询

/**
 * 周边搜索
 * @param keyword 关键字
 * @param center 中心点经纬度，AMap.LngLat 实例或数组 [lng, lat]
 * @param radius 半径，单位：米，取值范围：0-50000
 * @param callback 回调函数
 */
placeSearch.searchNearBy(
  '咖啡厅',                                  // 关键字
  new AMap.LngLat(116.405467, 39.907761),   // 中心点坐标
  200,                                       // 半径 200米[reference:3]
  function(status: string, result: IPlaceSearchCompleteResult | string) {
    if (status === 'complete') {
      // 搜索成功，result 为 IPlaceSearchCompleteResult
      console.log('周边搜索结果：', result);
    } else {
      // 搜索失败，result 为错误信息
      console.error('搜索失败：', result);
    }
  }
);

searchInBounds - 多边形/矩形范围搜索

根据范围和关键字进行范围查询。支持传入矩形（AMap.Bounds）或多边形（AMap.Polygon)

/**
 * 矩形范围搜索
 * @param keyword 关键字
 * @param bounds 矩形范围，AMap.Bounds 实例
 * @param callback 回调函数
 */
// 创建矩形范围
const southWest = new AMap.LngLat(116.389846, 39.9);
const northEast = new AMap.LngLat(116.403322, 39.92);
const bounds = new AMap.Bounds(southWest, northEast);

placeSearch.searchInBounds(
  '酒店',                                    // 关键字
  bounds,                                    // 矩形范围
  function(status: string, result: IPlaceSearchCompleteResult | string) {
    if (status === 'complete') {
      console.log('范围搜索结果：', result);
    } else {
      console.error('搜索失败：', result);
    }
  }
);

/**
 * 多边形范围搜索
 * @param keyword 关键字
 * @param polygon 多边形，AMap.Polygon 实例
 * @param callback 回调函数
 */
// 创建多边形
const polygon = new AMap.Polygon({
  path: [
    [116.39, 39.91],
    [116.41, 39.91],
    [116.41, 39.93],
    [116.39, 39.93]
  ]
});

placeSearch.searchInBounds(
  '酒店',                                    // 关键字
  polygon,                                   // 多边形
  function(status: string, result: IPlaceSearchCompleteResult | string) {
    if (status === 'complete') {
      console.log('多边形搜索结果：', result);
    } else {
      console.error('搜索失败：', result);
    }
  }
);

getDetails - 根据POI ID查询详情

如果已知一个 POI ID，要查询对应 POI 的详细信息，可以使用 getDetails 方法

/**
 * 根据POI ID查询详细信息
 * @param PGUID POI的唯一标识ID
 * @param callback 回调函数
 */
placeSearch.getDetails(
  'B0L3SN28D5',                              // POI ID
  function(status: string, result: IPlaceSearchCompleteResult | string) {
    if (status === 'complete') {
      console.log('POI详情：', result);
    } else {
      console.error('查询失败：', result);
    }
  }
);

参考

AMap.PlaceSearch