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

地点查询

该示例展示了如何进行地点(如:肯德基、CDB等等)的搜索。
00:00 / 01:00
扫描二维码在手机端体验功能
体验移动端 扫码体验移动端

使用场景

搜索出来的地点可以作为路线规划的起终点,也适用于查找具体位置的场景。

用到产品

Android 地图 SDK

核心类/接口

接口

说明

版本

AMap

addMarker(MarkerOptions options)

加一个Marker(标记)到地图上。

V2.0.0版本起

Marker

setPosition(LatLng latlng)

设置 marker 的经纬度位置。

V2.0.0版本起

PoiOverlay

PoiOverlay(AMap amap, java.util.List pois)

通过此构造函数创建Poi图层。

V2.1.0版本起


addToMap()

将POI查询结果添加到地图上。

V2.1.0版本起


zoomToSpan()

移动镜头到当前的视角。

V2.1.0版本起

InputtipsQuery

InputtipsQuery(java.lang.String keyword, java.lang.String city)

构造函数,构造输入提示查询参数对象。

V2.1.0版本起


setCityLimit(boolean isLimit)

对获取结果进行严格城市限制。

V2.8.0版本起

Inputtips

Inputtips(Context context, InputtipsQuery query)

根据给定的参数构造一个Inputtips的新对象。

V2.1.0版本起


setInputtipsListener(Inputtips.InputtipsListener listener)

设置查询监听器。

V2.1.0版本起


requestInputtipsAsyn()

查询输入提示的异步接口。

V2.1.0版本起

Inputtips.InputtipsListener

onGetInputtips(java.util.List inputTips, int resultID)

输入提示回调的方法。

V2.1.0版本起

PoiSearch.Query

Query(java.lang.String query, java.lang.String ctgr, java.lang.String city)

构造函数,构造POI搜索查询参数对象。

V2.1.0版本起


setCityLimit(boolean isLimit)

返回是否严格按照设定城市搜索。

V2.8.0版本起

PoiSearch

PoiSearch(Context context, PoiSearch.Query query)

根据给定的参数构造一个PoiSearch 的新对象。

V2.1.0版本起


setOnPoiSearchListener(PoiSearch.OnPoiSearchListener listener)

设置查询监听。

V2.1.0版本起


searchPOIAsyn()

POI搜索异步接口。

V2.1.0版本起

PoiSearch.OnPoiSearchListener

onPoiSearched(PoiResult pageResult, int errorCode)

返回POI搜索异步处理的结果。

V2.1.0版本起

核心难点

1、配合输入提示功能使用,提升 POI 搜索的用户体验。

根据输入提示功能返回的提示词,若提示词的 id  为空,说明该提示词不是 POI,需以该输入词为关键词进行 POI 搜索,查询具体的地点;若 id 不为空,则是真实存在的地点,直接可以在地图上展示。

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (resultCode == RESULT_CODE && data
        != null) {
        mAMap.clear();
        Tip tip = data.getParcelableExtra(Constants.EXTRA_TIP);
        if (tip.getPoiID() == null || tip.getPoiID().equals("")) {
            doSearchQuery(tip.getName());
        } else {
            addTipMarker(tip);
        }
    }
}

2、如何更改显示在地图上的 POI 的样式(图标)?

在本示例中,POIOverlay 已对所有开发者开源,例如:修改 POIOverlay 中的 getBitmapDescriptor(int index) 方法的返回值,可以修改 POI 的图标样式。

其他的内容的修改请参考 POIOverlay 的源码。


00:00 / 01:00
扫描二维码在手机端体验功能
体验移动端 扫码体验移动端

使用场景

搜索出来的地点可以作为路线规划的起终点,也适用于查找具体位置的场景。

用到产品

iOS 地图 SDK

核心类/接口

接口

说明

版本

MAMapView

setCenterCoordinate:animated:

设置地图中心点。

V2.0.0版本起


addAnnotation:

向地图窗口添加标注。

V2.0.0版本起

MAMapViewDelegate

mapView:viewForAnnotation:

根据anntation生成对应的View。

V2.0.0版本起

AMapSearchAPI

AMapPOIKeywordsSearch:

POI 关键字查询接口。

V3.0.0版本起


AMapInputTipsSearch:

输入提示搜索接口。

V3.0.0版本起

AMapInputTipsSearchRequest

keywords

查询关键字。

V3.0.0版本起


city

查询城市,citycode或者adcode。

V3.0.0版本起


cityLimit

强制城市限制功能。

V3.2.0版本起

AMapPOIKeywordsSearchRequest

keywords

查询关键字,多个关键字用“|”分割 。

V3.0.0版本起


city

查询城市,可选值:cityname(中文或中文全拼)、citycode、adcode。(注:台湾地区一律设置为【台湾】,不具体到市。)

V3.0.0版本起


cityLimit

强制城市限制功能。

V3.2.0版本起

AMapPOISearchBaseRequest

requireExtension

是否返回扩展信息,默认NO。

V3.0.0版本起

AMapSearchDelegate

onInputTipsSearchDone:response:

输入提示查询回调函数。

V3.0.0版本起


onPOISearchDone:response:

POI查询回调函数。

V3.0.0版本起

核心难点

1、配合输入提示功能使用,提升POI搜索的用户体验。

根据输入提示功能返回的提示词,若提示词的 uid 为空,说明改提示词不是POI,需以该输入词为关键词进行 POI 搜索,查询具体的地点;若 uid 不为空,则是真实存在的地点,直接可以在地图上展示。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [self.mapView removeAnnotations:self.mapView.annotations];
    
    AMapTip *tip = self.tips[indexPath.row];
    
    if (tip.uid != nil && tip.location != nil) /* 可以直接在地图打点  */
    {
        AMapTipAnnotation *annotation = [[AMapTipAnnotation alloc] initWithMapTip:tip];
        [self.mapView addAnnotation:annotation];
        [self.mapView setCenterCoordinate:annotation.coordinate];
        [self.mapView selectAnnotation:annotation animated:YES];
    }
    else /* 进行POI关键字搜索  */
    {
        [self searchPOIWithTip:tip];
    }
    
    self.searchController.active = NO;
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    
    tableView.deselectRow(at: indexPath, animated: false)
    
    mapView.removeAnnotations(mapView.annotations)
    
    let tip = tableData[indexPath.row]
    
    if tip.uid != nil && tip.location != nil {
        let coordinate = CLLocationCoordinate2D(latitude: CLLocationDegrees(tip.location.latitude), longitude: CLLocationDegrees(tip.location.longitude))
        let anno = MAPointAnnotation()
        anno.coordinate = coordinate
        anno.title = tip.name
        anno.subtitle = tip.address
        
        mapView.addAnnotation(anno)
        mapView.centerCoordinate = anno.coordinate
        mapView.selectAnnotation(anno, animated: true)
        
    }
    else {
        searchPOI(withTip: tip)
    }
    
    searchController.isActive = false
}
00:00 / 01:00
扫描二维码在手机端体验功能

体验地址

用到产品

JavaScript API

实现思路

 

  1. 基于 AMap.Autocomplete,实现一个支持关键字自动提示的搜索框 
  2. 基于 AMap.PlaceSearch, 实现关键字搜索并显示结果列表 
  3. 监听AMap.AutocompleteAMap.PlaceSearch抛出的事件,实现搜索框与结果面板之间的联动 
  4. 细节优化,包括结果面板的显示/隐藏,搜索结果的清楚,搜索中显示loading状态等 

效果预览




核心类/接口

类名

方法名/属性

说明

Autocomplete

input:HTMLInputElement

设置后在指定input元素中输入文字将自动生成和显示提示列表

PlaceSearch

panel:HTMLDivElement

设置penel属性后,搜索结果列表将自动显示在指定的div中

PlaceSearch

search(keyword:String,callback:function(status,result){})

根据关键字返回相关联的POI信息

关键点

 

  • 如何获取用户选中的关键字? 监听AMap.Autocompleteselect事件,从事件参数中获取对应的城市信息和关键字名称传递给AMap.PlaceSearch  
AMap.event.addListener(auto, "select", function(e) {
           //设置搜索的城市
           placeSearch.setCity(e.poi.adcode);
           //开始搜索对应的poi名称
           placeSearch.search(e.poi.name, function(status, results) {
           //.....
           });
       });
  • 如何获取用户选中的地点结果,比如通过点击结果列表? 监听AMap.PlaceSearchselectChanged事件,从事件参数中可获取选中的地点信息  
AMap.event.addListener(placeSearch, 'selectChanged', function(results) {
           //获取当前选中的结果数据
           console.log(results.selected.data);
       });
  • 如何清除搜索结果 调用AMap.PlaceSearchclear函数 

相关参考