输入提示与POI搜索 最后更新时间: 2023年07月14日
本章主要介绍以下内容：
- 输入提示插件
AMap.Autocomplete - 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即是对应的匹配数据
})
})
使用输入提示插件的默认UI
通常情况下，开发者需要根据表单控件相关事件的触发来执行AMap.Autocomplete的search方法，并将返回结果绘制成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还提供了其它几种搜索方法：
根据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搜索插件结合使用
通常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
})
AMap.event.addListener(autocomplete, 'select', function(e){
//TODO 针对选中的poi实现自己的功能
placeSearch.search(e.poi.name)
})
})
UI组件-PoiPicker
如果您需要将Autocomplete和PlaceSearch结合使用，我们还提供了UI组件-PoiPicker供您使用。PoiPicker（POI选点）在给定的输入框上集成输入提示和关键字搜索功能，方便用户选取特定地点（即POI）。
更多关于PoiPicker的信息，请移步PoiPicker文档查看。
