地图API收货地址详解2

Posted 酸奶小妹

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地图API收货地址详解2相关的知识，希望对你有一定的参考价值。

上次讲解的方法是：

在地图中心点添加一个标注，每次拖动地图就获取地图中心点，再把标注的位置设置为地图中心点。可参考教程：http://www.cnblogs.com/milkmap/p/6126424.html

 

可能有开发者觉得，这个算法会有“延时”，这次提供一个新的方法：

将一张标注图片始终固定在地图中央，不在地图上添加标注。

技术分享

 

使用CSS将一张标注样子的图片，固定在地图中央。

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

 

创建地图

//创建地图
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();

 

当地图滑动时，打印当前地图中央经纬度

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

 

到这里，就完成了拖动地图，就可以打印地图中心点。同时，保持了标注图片一直在地图中央显示。

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

 

进阶的做法：

您还可以把地址解析的功能加上，当输入结构化地址时，如果地址解析成功，就重新设置地图中心点。

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

 

以上是关于地图API收货地址详解2的主要内容，如果未能解决你的问题，请参考以下文章

如何在地图片段 API v2 布局顶部添加按钮

PayPal JavaScript API 通行证收货地址

JavaScript - Paypal API，如何更改收货地址？

百度地图API详解之地图标注

[转]百度地图API详解之地图坐标系统

谷歌地图片段显示空地图