示例中心
功能在线体验
menu 导航 closed 关闭

高德 开发 地图 JS API v2.0 教程 服务 输入提示与POI搜索

更新时间:2020年03月31日


本章主要介绍以下内容:

  1. 输入提示插件AMap.AutoComplete
  2. POI搜索插件AMap.PlaceSearch

输入提示插件

如果您想实现类似在高德地图的输入框里输入文本片段即显示相关的匹配信息,使用输入提示插件AMap.PlaceSearch就对了。

输入提示插件支持设置搜索限制条件,比如传入要搜索的POI类型和城市等参数,搜索完成后用户可获取到对应的查询结果。利用输入提示插件获取匹配信息需要以下代码实现:

// JSAPI 2.0 输入提示插件名称由 AMap.Autocomplete 变更为 AMap.AutoComplete 啦!
AMap.plugin('AMap.AutoComplete', function(){
  var autoOptions = {
    //city 限定城市,默认全国
    city: '全国'
  };
  // 实例化AutoComplete
  var autoComplete= new AMap.AutoComplete(autoOptions);
  // 根据关键字进行搜索
  autoComplete.search(keyword, function(status, result) {
    // 搜索成功时,result即是对应的匹配数据
    console.log(result);
  })
})

查看全部属性及方法  亲自试一试

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

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

AMap.plugin('AMap.AutoComplete', function(){
  // 实例化AutoComplete
  var autoOptions = {
    // input 为绑定输入提示功能的input的DOM ID
    input: 'input_id'
  }
  var autoComplete= new AMap.AutoComplete(autoOptions);
  // 无需再手动执行search方法,autoComplete会根据传入input对应的DOM动态触发search
})

亲自试一试

POI搜索插件

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

var placeSearch = new AMap.PlaceSearch({
  // city 指定搜索所在城市,支持传入格式有:城市名、citycode和adcode
  city: '010'
});

placeSearch.search('北京大学', function (status, result) {
   // 查询成功时,result即对应匹配的POI信息
});

查看全部属性及方法 

除了search方法外,AMap.PlaceSearch还提供了其它几种搜索方法:

  • searchNearBy:根据中心点经纬度和半径进行周边搜索,相关示例
  • searchInBounds:根据传入的Bounds信息进行范围搜索, 相关示例


根据POIID查询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详情
  }) 
})

亲自试一试

输入提示和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){
    //TODO 针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name)
  })
 })

亲自试一试

新用户
福利
示例
中心
常见
问题