作者:实验室2012级刘力超
我们将高德地图开放接口集成到自己的应用中后,往往会遇到如下的需求场景:

  • 拖动marker选取一个地理位置,获取地理位置信息与经纬度。

这里将介绍如何实现这一需求。

直接上代码:

<div id="gmap" class="gmap" style="width:100%;height:500px;"></div>
<input type="text" placeholder="经度" name="lng" class="form-control">
<input type="text" placeholder="纬度" name="lat" class="form-control">
<input type="text" placeholder="地址" name="address" class="form-control">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=your_own_key&plugin=AMap.Geocoder"></script>

<script type="text/javascript">
    var map = new AMap.Map('gmap', {
        zoom: 12,
        center: [116.397428, 39.90923],
    });

    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
        var toolBar = new AMap.ToolBar();
        var scale = new AMap.Scale();
        map.addControl(toolBar);
        map.addControl(scale);
    });

    var marker = new AMap.Marker({
        position: map.getCenter(),
        draggable: true,
        cursor: 'move',
        raiseOnDrag: false,
        zIndex: 101
    });
    marker.setMap(map);

    $('input[name=lng]').val(marker.getPosition().lng);
    $('input[name=lat]').val(marker.getPosition().lat);

    AMap.event.addListener(marker, "dragstart", function(e) {
        $('input[name=lng]').val(marker.getPosition().lng);
        $('input[name=lat]').val(marker.getPosition().lat);
    });

    AMap.event.addListener(marker, "dragging", function(e) {
        $('input[name=address]').val('检索地址中......');
        $('input[name=lng]').val(marker.getPosition().lng);
        $('input[name=lat]').val(marker.getPosition().lat);
    });

    AMap.event.addListener(marker, "dragend", function(e) {
        $('input[name=lng]').val(marker.getPosition().lng);
        $('input[name=lat]').val(marker.getPosition().lat);
        lnglatXY = [marker.getPosition().lng, marker.getPosition().lat];
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                var address = result.regeocode.formattedAddress; //返回地址描述
                $('input[name=address]').val(address);
            }
        });
    });
</script>

注意将高德地图的key换成自己申请的key.

此处引入时我们需要同时引入高德地图自带的Geocoder,由此实现地理位置的编码和解码。

效果如下所示:

经度:
纬度:
地址: