开发 地图 JS API 2.0 进阶教程 服务插件和工具 输入提示与 POI 搜索

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

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

输入提示与 POI 搜索示例

1、准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2、输入提示插件

2.1 使用输入提示

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

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

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

注意

JS API 2.0 输入提示插件名称由AMap.Autocomplete变更为AMap.AutoComplete

//异步加载 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.AutoCompletesearch()方法,并将返回结果绘制成 DOM 显示到页面上。为了帮助开发者节省时间、提升效率,高德 JS API 还提供了一套默认的 UI 来自动在页面相应的表单控件上监听输入并显示匹配结果。如果你需要使用此功能,请按照下面代码示例编写即可

提示

你需要自定义一个输入框<input id="input_id">,将'input_id'替换成你自己输入框的id

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 搜索插件

提示

如果你之前没有使用过搜索 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);
  });
});
提示

searchNearBy()方法接收4个参数,分别对应为:搜索关键词,中心点经纬度,半径,搜索结果回调。

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);
  });
});
提示

searchInBounds()方法接收3个参数,分别对应为:搜索关键词,范围,搜索结果回调。

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 搜索插件结合使用

通常AutoCompletePlaceSearch结合使用,使用时只需在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

参数/方法

说明

类型 

参数值描述

city

输入提示时限定城市

String

可选值:城市名(中文或中文全拼)、citycodeadcode

input

指定一个 input 输入框,设定之后,在 input输入文字将自动生成下拉选择列表

String

持传入输入框DOM对象的id值,或直接传入输入框的DOM对象

search(keyword, callback)

根据输入关键字提示匹配信息

Function

keyword:关键字

callback:搜索结果回调

5.2 AMap.PlaceSearch

参数/方法

说明

类型 

参数值描述

city

查询时限定城市

String

可选值:城市名(中文或中文全拼)、citycode

adcode

search(keyword, callback)

根据输入关键字提示匹配信息

Function

keyword关键字

callback搜索结果回调

searchNearBy(keyword, center, radius,

callback)

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

Function

keyword关键字

center中心点经纬度

radius半径,取值范围:0-50000

callback搜索结果回调

searchInBounds(keyword, bounds, callback)

根据范围和关键词进行范围查询

Function

keyword关键字

bounds:范围

callback:搜索结果回调

返回顶部 示例中心 常见问题 智能客服 公众号
二维码