示例

输入组

html代码

<form role="form">
    <label for="id_address_input">地址</label>
    <div class="input-group" id="id_address_input">
        <input type="text" class="form-control">
        <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
    </div>
    <button id="id_get_data" type="button" class="btn btn-default">获取当前位置数据</button>
    <p id="id_data_display"></p>
</form>

js代码

var p = $("#id_address_input").AMapPositionPicker();
$("#id_get_data").on('click', function () {
    $("#id_data_display").html(JSON.stringify(p.AMapPositionPicker('position')));
});

提供初始位置

html代码

<form role="form">
    <label for="id_address_input1">地址</label>
    <div class="form-group">
        <input id="id_address_input1" type="text" class="form-control" data-provide="AMapPositionPicker"
               data-value-longitude="119.300939" data-value-latitude="26.075302"
               data-value-address="测试"/>
    </div>
    <button id="id_get_data1" type="button" class="btn btn-default">获取当前位置数据</button>
    <p id="id_data_display1"></p>
</form>

js代码

$("#id_get_data1").on('click', function () {
    $("#id_data_display1").html(JSON.stringify($("#id_address_input1").AMapPositionPicker('position')));
});

表单字段绑定

html代码

<form role="form" id="id_fields_form">
    <label for="id_address_input2">地址</label>
    <div class="form-group">
        <input id="id_address_input2" type="text" name="address" class="form-control"/>
    </div>
    <button id="id_get_data2" type="button" class="btn btn-default">获取表单数据</button>
    <p id="id_data_display2"></p>
</form>

js代码

var p2 = $("#id_address_input2").AMapPositionPicker({
    fields: [
        {
            selector: '#id_lnglat',
            name: 'lnglat',
            formatter: '{longitude},{latitude}'
        }
    ]
});
$("#id_get_data2").on('click', function () {
    alert($("#id_fields_form").serialize());
});