高德地图位置选择器

高德地图位置选择表单组件

下载

使用

AMapPositionPicker是一款基于高德地图的位置选择插件，使用jQuery开发，提供了以下特性：

  • data-*属性配置
  • 初始位置数据
  • 浏览器定位
  • 字段显示格式、验证
  • 数据控件绑定
  • 支持地理逆编码
  • 自定义Modal外观样式

使用步骤

1. 依次引入高德地图JS、jQuery、Bootstrap和bootstrap.AMapPositionPicker.min.js文件。

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./dist/bootstrap.AMapPositionPicker.min.js"></script>

2. 在目标输入框初始化选项。

html代码

<input type="text" id="id_address_input" name="address"/>

JS代码

$("#id_address_input").AMapPositionPicker();

3 运行效果

选项

使用 $(element).AMapPositionPicker(options) 初始化一个位置选择器。

required

boolean. 默认值：true. data属性：data-required

是否为必填项。

formatter

String. 默认值：'{address}'. data属性：data-formatter

目标输入框的位置格式字符串，可用的变量包括longitude、latitude、address。使用时用{}将变量包裹起来，并且二者之间不能含有空格。

value

Position,object. 默认值： null. data属性：data-value-*

初始位置数据。例如可设置为{longitude:119.300939, latitude:26.075302, address:'测试地址', label:'测试地点'}。

center

object.默认值：null.data属性：data-center-*

地图中心位置经纬度，用于未选择位置时地图中心位置，默认为当前城市的中心位置。

title

String. 默认值：'请选择地址'. data属性：data-title

Modal标题名称。

errorTip

String. 默认值：'请选择地址'. data属性：data-error-tip

未选择位置的错误提示文字。

height

String. 默认值：'500px'. data属性：data-height

地图控件的高度。宽度按照Modal自适应设置。

fields

Array. 默认值：[]

数据绑定选项，用于提交表单中多字段的情况。列表中每一项映射到一个<input/>控件（若不存在就自动创建）。

{
  selector:'#id_lnglat', //选择器
  name:'lnglat', //name属性值
  formatter:'{longitude},{latitude}' //value的格式字符串
}

onPicked 废弃

此项已废弃，将在v1.0时移除。

函数签名:function(position, hasPicked);。选择完成事件处理函数。参数参见事件 AMPP.PickCompleted。

方法

$(element).AMapPositionPicker(methodString, ...args)

所有方法按照上述方式调用。

position

返回类型：Position。返回当前选择的位置。

getInitialPosition

返回类型：Position。返回初始位置。

事件

所有的事件均使用 AMPP 命名空间。

AMPP.PickCompleted

函数签名：function(e, position, hasPicked){}。选择完成事件处理函数。

参数

  • e:事件对象。
  • position:位置对象。
  • hasPicked：表明是否已经选择了一个位置。通常用于非必填项(required=false)的情况。

工具

位置选择插件提供了若干个工具函数和变量。调用形式为 $.AMapPositionPicker.FOO( ...args) 或者 $.AMapPositionPicker.FOO 。

showPositionInMap

函数签名：showPositionInMap(position)；在地图上显示点标记。

参数

  • position:位置对象。

pluginVersion

插件版本字符串常量，如 1.0.0。

协议

本项目采用MIT协议开源。