高德 开发 地图 JS API 开发指南 获取地图数据 输入提示

更新时间:2017年05月23日

亲手试一试

AMap.Autocomplete根据输入关键字提示匹配信息,“输入提示”经常和“地点搜索”配合使用,允许用户根据输入提示匹配结果,进行相关POI搜索。您可以根据“输入提示”匹配信息,将Poi类型和城市作为输入提示和限制条件,并自定义回调函数来显示查询到的结果。当请求查询失败后,系统会返回错误信息。

插件引入与对象创建

在使用插件之前,需要使用AMap.plugin方法加载插件,然后在回调函数中可以进行服务的设定和查询:

AMap.plugin('AMap.Autocomplete',function(){//回调函数
    //实例化Autocomplete
    var autoOptions = {
        city: "", //城市,默认全国
        input:"input_id"//使用联想输入的input的id
    };
    autocomplete= new AMap.Autocomplete(autoOptions);
    //TODO: 使用autocomplete对象调用相关功能
})

构造参数详情

参数名称

类型

说明

type

String

提示Poi类型,多个类型用“|”分隔,POI相关类型编码,详见请在网站“相关下载”,默认为所有类别

city

String

可选,城市名(中文或中文全拼)、citycode、adcode;默认为“全国”

input

String

可选参数,用来指定一个input输入框,设定之后,将自动生成下拉选择列表

输入提示的使用方式

在使用各类应用的时候,用户经常会碰到不能准确输入某个店面或者建筑名称的情况,这个时候使用联想输入自动提示这个插件就非常方便,只需要输入部分关键字就可以获取到相关的提示信息,Autocomplete插件有两种使用方式:

第一种,使用我们包装好的input属性和相关事件,用户输入之后会自动生成下拉式的list,选择某个单项之后将会触发select 事件,返回被用户选中的POI信息:

var autoOptions = {
    city: "", //城市,默认全国
    input:"input_id"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
AMap.event.addListener(auto, "select", function(){
     //TODO 针对选中的poi实现自己的功能
}); 

第二种,直接使用服务返回的数据,构造的option中不写input属性,在search方法中传入回调函数,第一个参数为关键字,第二个参数为回调函数:

var autoOptions = {
    city: "" //城市,默认全国
};
autocomplete= new AMap.Autocomplete(autoOptions);
autocomplete.search(keywords, function(status, result){
    //TODO:开发者使用result自己进行下拉列表的显示与交互功能
});

回调函数返回查询结果的状态status和查询结果result。当status为complete的时候表示查询到有效结果。 当status为complete时,result为AutocompleteResult;当status为error时,result为错误信息info;当status为no_data时,代表检索返回0结果,在使用第一种方式的时候也可以对search方法传入回调函数以获得查询得到的数据结果。

AutocompleteResult对象说明

字段名

类型

说明

info

String

查询状态说明

count

Number

输入提示条数

tips

Array.<Tip>

输入提示列表

Tip对象说明

字段名

类型

说明

name

String

名称

district

String

所属区域

adcode

String

区域编码

输入提示与POI搜索结合

通常联想输入提示与POI搜索结合使用,使用的时候,只需要在select事件的响应函数中调用PlaceSearch的相关查询方法,这里我们使用PlaceSearch包装好的的map属性来实现POI搜索结果的显示:

AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
     var autoOptions = {
          city: "北京", //城市,默认全国
          input: "input"//使用联想输入的input的id
     };
     autocomplete= new AMap.Autocomplete(autoOptions);
     var placeSearch = new AMap.PlaceSearch({
              city:'北京',
              map:map
     });
     AMap.event.addListener(autocomplete, "select", function(e){
           //TODO 针对选中的poi实现自己的功能
           placeSearch.search(e.poi.name)
     });
 });  
移动端
示例中心
功能
在线体验
常见问题