输入提示与 POI 搜索 最后更新时间: 2024年02月02日

高德开放平台不仅提供基础地图渲染能力，还开放了丰富多样的地理信息查询服务。为方便开发者调用，JS API 结合 Web 服务 API 封装了输入提示插件AMap.AutoComplete和 POI 搜索插件AMap.PlaceSearch，分别提供输入提示建议和 POI 兴趣点搜索功能。本文将介绍以上两个插件的功能、调用方法、场景示例。

输入提示与 POI 搜索示例

1、准备

2、输入提示插件

2.1 使用输入提示

AMap.AutoComplete输入提示插件，可以实现在输入框里输入文本片段即显示相关的匹配信息。

输入提示插件支持设置搜索限制条件，比如：传入要搜索的 POI 类型（type）和城市（city）等参数，搜索完成后用户可获取到对应的查询结果。

利用输入提示插件获取匹配信息需要以下代码实现：

//异步加载 AutoComplete 插件
AMap.plugin("AMap.AutoComplete", function () {
  var autoOptions = {
    //city 限定城市，默认全国
    city: "全国",
  };
  //实例化AutoComplete
  var autoComplete = new AMap.AutoComplete(autoOptions);
  //根据关键字进行搜索 keyword 为搜索的关键词
  autoComplete.search(keyword, function (status, result) {
    //搜索成功时，result 即是对应的匹配数据
    console.log(result);
  });
});

2.2 使用输入提示插件的默认 UI

通常情况下，开发者需要根据表单控件事件的触发来执行AMap.AutoComplete的search()方法，并将返回结果绘制成 DOM 显示到页面上。为了帮助开发者节省时间、提升效率，高德 JS API 还提供了一套默认的 UI 来自动在页面相应的表单控件上监听输入并显示匹配结果。如果你需要使用此功能，请按照下面代码示例编写即可：

AMap.plugin("AMap.AutoComplete", function () {
  var autoOptions = {
    input: "input_id", //"input_id"替换为输入框实际 id 
  };
  var autoComplete = new AMap.AutoComplete(autoOptions);
  //无需再手动执行 search 方法，autoComplete 会根据传 input 对应的 DOM 动态触发 search
});

3、POI 搜索插件

3.1 根据关键字查询 POI 详细信息

如果你需要根据关键字获取对应城市里相关的 POI 信息，请使用 POI 搜索插件。假如要在北京搜索北京大学相关的 POI，可以按如下代码实现：

//异步加载 PlaceSearch 插件
AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch({
    //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
    city: "010",
  });
  placeSearch.search("北京大学", function (status, result) {
    //查询成功时，result 即对应匹配的 POI 信息
    console.log(result);
  });
});

3.2 根据中心点经纬度和半径进行关键词周边搜索

如果你需要根据关键字获取周边相关的 POI 信息，请使用 searchNearBy()方法。假如要在北京以国贸为中心200米范围内搜索咖啡厅相关的 POI，可以按如下代码实现：

AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch({
    //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
    city: "010",
  });
  var cpoint = [116.461841,39.909104]; //中心点坐标
  placeSearch.searchNearBy("咖啡厅", cpoint, 200, function (status, result) {
    //查询成功时，result 即对应匹配的 POI 信息
    console.log(result);
  });
});

3.3 根据范围进行关键词搜索

如果你需要根据关键字获取指定范围内相关的 POI 信息，请使用 searchInBounds()方法。假如要获取多边形区域内酒店相关的 POI，可以按如下代码实现：

AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch({
    //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
    city: "010",
  });
  //多边形范围坐标数组
  var polygonArr = [
    [116.403322, 39.920255],
    [116.410703, 39.897555],
    [116.402292, 39.892353],
    [116.389846, 39.891365],
  ];
  placeSearch.searchInBounds("酒店", polygonArr, function (status, result) {
    //查询成功时，result 即对应匹配的 POI 信息
    console.log(result);
  });
});

3.4 根据 POI ID 查询 POI 详细信息

如果已知一个 POI ID，要查询对应 POI 的详细信息，可以使用 POI 搜索插件的getDetails()方法，相关代码如下：

AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch();
  //中国国家博物馆对应的 POI ID
  var poiid = "B000A83U0P";
  placeSearch.getDetails(poiid, function (status, result) {
  //查询成功时，result 即为对应的 POI 详情
  });
});

4、输入提示和 POI 搜索插件结合使用

通常AutoComplete与PlaceSearch结合使用，使用时只需在select事件的响应函数中调用PlaceSearch的相关查询方法，这里我们使用PlaceSearch包装好的的map属性来实现 POI 搜索结果的显示：

AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
  var autoOptions = {
    //城市，默认全国
    city: "北京",
    //使用联想输入的 input 的 id
    input: "input",
  };
  var autocomplete = new AMap.AutoComplete(autoOptions);
  var placeSearch = new AMap.PlaceSearch({
    city: "北京",
    map: map,
  });
  autocomplete.on("select", function (e) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name);
  });
});

5、本章涉及的属性及方法说明

5.1 AMap.AutoComplete

5.2 AMap.PlaceSearch