首页 > 代码库 > 【地图API】收货地址详解2
【地图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‘> </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>
示例：http://zhaoziang.com/amap/deliver_address_point.htm
【地图API】收货地址详解2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。