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

高德开放平台不仅提供基础地图渲染能力,还开放了丰富多样的地理信息查询服务。为方便开发者调用,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