【地圖API】地址錄入時如何獲得準確的經緯度？淘寶收貨地址詳解

酸奶小妹發表於2016-12-02
地圖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>

 

相關文章