示例中心
功能在线体验
控制台

高德 开发 地图 JS API 参考手册 - UI组件库 其他组件 拖拽选址

更新时间:2017年05月12日

PositionPicker(拖拽选址),用于在地图上选取位置,并获取所选位置的地址信息,以及周边POI、周边道路、周边路口等信息。

该组件基于JSAPI的Map、Marker、Geocode的逆地理编码接口等功能实现。提供了拖拽地图选址和拖拽Marker选址两种模式供选用。如果有自定义UI的需求,该组件也提供了相应的接口,具体请参考下方示例。

如何使用

1、引入UI组件库

2、加载PositionPicker(模块名:ui/misc/PositionPicker):

//加载PositionPicker,loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
    var map = new AMap.Map('container',{
        zoom:16
    })
    var positionPicker = new PositionPicker({
        mode:'dragMap',//设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
        map:map//依赖地图对象
    });
    //TODO:事件绑定、结果处理等
});

示例中心

3、绑定事件处理函数

当拖拽结束后,拖拽选址组件会进行服务查询获得所选位置的地址、周边信息等数据,如果获取成功,将触发success事件,否则将触发fail事件。创建完拖拽选址组件的对象之后,我们需要为其绑定successfail事件:

positionPicker.on('success', function(positionResult) {
    document.getElementById('lnglat').innerHTML = positionResult.position;
    document.getElementById('address').innerHTML = positionResult.address;
    document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
    document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
    document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
});
positionPicker.on('fail', function(positionResult) {
    // 海上或海外无法获得地址信息
    document.getElementById('lnglat').innerHTML = ' ';
    document.getElementById('address').innerHTML = ' ';
    document.getElementById('nearestJunction').innerHTML = ' ';
    document.getElementById('nearestRoad').innerHTML = ' ';
    document.getElementById('nearestPOI').innerHTML = ' ';
});

4、开启拖拽选址

上述准备工作做完之后,就可以通过start方法开始拖拽选点的操作了,start方法可以接受一个经纬度参数作为,拖拽的起始点。调用start之后,如果您选择的是dragMap模式,地图中央将展示一个点状自定义控件;如果您选用的是dragMarker模式,将在您指定的位置显示一个Marker点。需要的时候调用stop方法可以停止选址,停止时将自动移除相应的控件或者Marker。

positionPicker.start();

5、自定义样式

如果您有修改UI展现的需求,拖拽选址组件提供了iconStyle属性用来更改默认的点样式:

var positionPicker = new PositionPicker({
    mode:'dragMarker',//拖拽Marker模式
    map:map,
    iconStyle:{//自定义外观
       url:'//webapi.amap.com/ui/1.0/assets/position-picker2.png',//图片地址
       size:[48,48],  //要显示的点大小,将缩放图片
       ancher:[24,40],//锚点的位置,即被size缩放之后,图片的什么位置作为选中的位置
    }
});

接口文档

PositionPicker类

构造函数

说明

PositionPicker(opts:PositionPickerOptions)

创建一个拖拽选址类,并设定相关的参数

构造参数-PositionPickerOptions

参数名成

字段类型

说明

map

AMap.Map

指定地图对象

mode

String

指定拖拽模式,默认dragMap,可选dragMapdragMarker

iconStyle

IconStyleOptions

用于自定义点的显示样式

IconStyleOptions

参数名称

字段类型

说明

url

String

指定自定义点样式的图片地址

size

[Number,Number]

指定自定义点的大小,图片将配缩放成此大小

ancher

[Number,Number]

指定锚点的位置,即被缩放之后,图片的什么位置作为选中的位置

PositionPicker类的方法

方法名称

说明

start(originPos:AMap.LngLat)

以originPos为初始位置开始拖拽选址,参数缺省值为地图中心点

stop()

|停止拖拽选址

PositionPicker类的事件

事件名称

事件对象

说明

success

positionPickerResult

成功获取到了拖拽结束点的有效地址和周边信息时触发

fail


获取不到拽结束点的有效地址和周边信息时触发

positionPickerResult对象

字段名称

字段类型

说明

position

AMap.LngLat

选中的位置

address

String

选中的位置的地址信息

nearestJunction

String

据选中位置最近的十字路口的信息,更详细的信息见regeocode.crosses

nearestRoad

String

据选中位置最近的道路,更详细的信息见regeocode.roads

nearestPOI

String

据选中位置最近的POI信息,更详细的信息见regeocode.pois

regeocode

ReGeocodeResult

逆地理编码信息,详见AMap.Geocoder

移动端
示例中心
功能
在线体验
常见问题