【地图API】地址录入时如何获得准确的经纬度？淘宝收货地址详解

用户需求：管理者需要录入一批商户，并在地图上把商户展示出来。但发现一些商户的地址描述并不清楚，导致商户位置出错。如何获得更加准确的商户位置呢？

分析：假设地址准确的，可以通过地址解析，得到准确的经纬度。假设地址缺失，我们通过人工打点的办法，获取精准的位置。可以参考淘宝的收货地址，如下图。

------------------------------------------------------------------------------------------------------

重点功能

功能一、地址解析

方法：AMap.Geocoder
说明：地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换

方法：getLocation

说明：根据给定的地址描述进行解析

当地址解析成功时，执行回调函数，将该地址对应的经纬度显示出来，并在该点打个标注

当地址解析失败时，告诉用户“查无此地址”

地址解析代码如下：

function geocoder() {

    map.clearMap();

    var myGeo = new AMap.Geocoder();

    //地理编码,返回地理编码结果

    myGeo.getLocation($addressBox.value, function(status, result) {

        if (status === 'complete' && result.info === 'OK') {

            //地址解析成功

            geocoder_CallBack(result);

        }

        else{

            //地址解析失败

            $pointBox.innerHTML = "查无此地址";

        }

    });

}

回调函数如下：

//地理编码返回结果展示

function geocoder_CallBack(data) {

    var resultStr = "";

    var geocode = data.geocodes;

    addMarker(geocode[0].location);

    resultStr += "当前坐标</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat();

    map.setFitView();

    $pointBox.innerHTML = resultStr;

}

功能二、拖拽地图，获取经纬度

给map添加地图事件，当事件触发时，在地图中心打点

AMap.Map 构造一个地图对象

moveend 地图移动结束后触发，包括平移和缩放。如地图有拖拽缓动效果，则在缓动结束后触发

地图事件：

map.on('moveend', function() {

    addCenterPoint();

});

在地图中心打点：

//地图中心点添加标注

function addCenterPoint(){

    map.clearMap();

    var centerPoint = map.getCenter();

    addMarker(centerPoint);

    $pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ',' + centerPoint.getLat();

}

addCenterPoint();

其他功能

1.显示地图

//创建地图

var map = new AMap.Map("mapBox", {

    resizeEnable: true,

    center: [116.397428, 39.90923],

    zoom:14

});

2.展示标注

//添加标注

function addMarker(point) {

    var marker = new AMap.Marker({

        map: map,

        position: [ point.getLng(),  point.getLat()]

    });

}

------------------------------------------------------------------------------------------------------

截图：

示例查看：http://zhaoziang.com/amap/deliver_address.htm

全部源代码：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>收货地址</title>

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

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    <style>

        #addressBox{height:20px;width:600px;}

        #mapBox{height:400px;width:600px}

        #pointBox{height:20px;width:600px;}

    </style>

<body>

<div>

    <input id="addressBox" type="text" value="请输入结构化地址，例如北京市朝阳区望京街道首开广场" />

    <input id="" type="button" onclick="geocoder();" value="搜索" />

</div>

<div id='pointBox'>&nbsp;</div>

<div id='mapBox'></div>

<div>

使用方法：<br />

1.输入地址，点击搜索<br />

2.如果不够准确，可以拖动地图改变经纬度

</div>

<script type="text/javascript">

var $addressBox = document.getElementById('addressBox');

var $pointBox = document.getElementById("pointBox");

//创建地图

var map = new AMap.Map("mapBox", {

    resizeEnable: true,

    center: [116.397428, 39.90923],

    zoom:14

});

//添加标注

function addMarker(point) {

    var marker = new AMap.Marker({

        map: map,

        position: [ point.getLng(),  point.getLat()]

    });

}

//地图中心点添加标注

function addCenterPoint(){

    map.clearMap();

    var centerPoint = map.getCenter();

    addMarker(centerPoint);

    $pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ',' + centerPoint.getLat();

}

addCenterPoint();

function geocoder() {

    map.clearMap();

    var myGeo = new AMap.Geocoder();

    //地理编码,返回地理编码结果

    myGeo.getLocation($addressBox.value, function(status, result) {

        if (status === 'complete' && result.info === 'OK') {

            //地址解析成功

            geocoder_CallBack(result);

        }

        else{

            //地址解析失败

            $pointBox.innerHTML = "查无此地址";

        }

    });

}

//地理编码返回结果展示

function geocoder_CallBack(data) {

    var resultStr = "";

    var geocode = data.geocodes;

    addMarker(geocode[0].location);

    resultStr += "当前坐标</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat();

    map.setFitView();

    $pointBox.innerHTML = resultStr;

}

map.on('moveend', function() {

    addCenterPoint();

});

</script>

</body>

</html>