输入提示与POI搜索

#输入提示与POI搜索| 来源: 网络整理| 查看: 265

本章主要介绍以下内容：

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

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

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

JavaScriptAMap.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.Autocomplete的search方法，并将返回结果绘制成DOM显示到页面上。除此之外，高德JS API还提供了一套默认的UI来帮助开发者节省时间、提升效率，自动在页面相应的表单控件上监听输入并显示匹配结果。如果您需要使用此功能，请按照下面代码示例编写即可：

JavaScriptAMap.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，可以按如下代码实现：

JavaScriptvar 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方法，相关代码如下：

JavaScriptAMap.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搜索插件结合使用

通常Autocomplete与PlaceSearch结合使用，使用时只需在select事件的响应函数中调用PlaceSearch的相关查询方法，这里我们使用PlaceSearch包装好的的map属性来实现POI搜索结果的显示：

JavaScriptAMap.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文档查看。

【本文地址】

公司简介

联系我们