【地圖API】收貨地址詳解2

時間 2019-11-29

標籤地圖API 收貨地址詳解简体版

原文原文鏈接

上次講解的方法是：javascript

在地圖中心點添加一個標註，每次拖動地圖就獲取地圖中心點，再把標註的位置設置爲地圖中心點。可參考教程：http://www.cnblogs.com/milkmap/p/6126424.htmlhtml

可能有開發者以爲，這個算法會有「延時」，此次提供一個新的方法：java

將一張標註圖片始終固定在地圖中央，不在地圖上添加標註。web

使用CSS將一張標註樣子的圖片，固定在地圖中央。算法

<style>
        #mapBox{height:400px;width:600px;position:absolute;}
        #img_point{position:absolute;top:200px;left:300px;z-index:9999999;}
</style>

建立地圖api

//建立地圖
var map = new AMap.Map("mapBox", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom:14
});

獲取並打印當前地圖中央的經緯度ide

//打印當前經緯度
function addCenterPoint(){
    var centerPoint = map.getCenter();
    $pointBox.innerHTML = "當前經緯度爲：" + centerPoint.getLng() + ',' + centerPoint.getLat();
}
addCenterPoint();

當地圖滑動時，打印當前地圖中央經緯度ui

//添加地圖事件
map.on('moveend', function() {
    addCenterPoint();
});

到這裏，就完成了拖動地圖，就能夠打印地圖中心點。同時，保持了標註圖片一直在地圖中央顯示。編碼

示例：http://zhaoziang.com/amap/deliver_address_point.htmspa

進階的作法：

您還能夠把地址解析的功能加上，當輸入結構化地址時，若是地址解析成功，就從新設置地圖中心點。

function geocoder() {
    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;
    var myLng = geocode[0].location.getLng();
    var myLat = geocode[0].location.getLat();
    resultStr += "當前座標</b>：" + myLng + ", " + myLat;
    $pointBox.innerHTML = resultStr;
    map.setCenter(new AMap.LngLat(myLng,myLat));    
}

所有源代碼：

<!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;position:absolute;}
        #pointBox{height:20px;width:600px;}
        #img_point{position:absolute;top:200px;left:300px;z-index:9999999;}
    </style>
<body>
<div>
    <input id="addressBox" type="text" value="請輸入結構化地址，例如北京市朝陽區望京街道首開廣場" />
    <input id="" type="button" onclick="geocoder();" value="搜索" />
</div>
<img id="img_point" src="marker64.png" />
<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 addCenterPoint(){
    var centerPoint = map.getCenter();
    $pointBox.innerHTML = "當前經緯度爲：" + centerPoint.getLng() + ',' + centerPoint.getLat();
}
addCenterPoint();

function geocoder() {
    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;
    var myLng = geocode[0].location.getLng();
    var myLat = geocode[0].location.getLat();
    resultStr += "當前座標</b>：" + myLng + ", " + myLat;
    $pointBox.innerHTML = resultStr;
    map.setCenter(new AMap.LngLat(myLng,myLat));    
}

//添加地圖事件
map.on('moveend', function() {
    addCenterPoint();
});
</script>
</body>
</html>

View Code

示例：http://zhaoziang.com/amap/deliver_address_point.htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。