拖拽选址最后更新时间: 2021年01月22日

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事件。创建完拖拽选址组件的对象之后，我们需要为其绑定success和fail事件：

JavaScript

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。

JavaScript

positionPicker.start();

5、自定义样式

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

JavaScript

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`,可选`dragMap`、`dragMarker`
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

拖拽选址 最后更新时间: 2021年01月22日

如何使用

接口文档

拖拽选址最后更新时间: 2021年01月22日