开发 地图 JS API 1.4 教程 服务 输入提示与POI搜索

输入提示与POI搜索 最后更新时间: 2023年07月14日


本章主要介绍以下内容:

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

输入提示插件

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

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

AMap.plugin('AMap.Autocomplete', function(){
  // 实例化Autocomplete
  var autoOptions = {
    //city 限定城市,默认全国
    city: '全国'
  }
  var autoComplete= new AMap.Autocomplete(autoOptions);
  autoComplete.search(keyword, function(status, result) {
    // 搜索成功时,result即是对应的匹配数据
  })
})

查看AMap.Autocomplete全部属性和方法

使用输入提示插件的默认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
})

查看AMap.Autocomplete全部属性和方法

POI搜索插件

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

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

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

查看AMap.PlaceSearch全部属性和方法


除了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详情
  }) 
})

查看AMap.PlaceSearch全部属性和方法

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

UI组件-PoiPicker


如果您需要将AutocompletePlaceSearch结合使用,我们还提供了UI组件-PoiPicker供您使用。PoiPicker(POI选点)在给定的输入框上集成输入提示和关键字搜索功能,方便用户选取特定地点(即POI)。

更多关于PoiPicker的信息,请移步PoiPicker文档查看。

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