【地图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

转载于:https://www.cnblogs.com/milkmap/p/6144191.html

【地图API】收货地址详解2相关推荐

百度地图api定位的使用详解和返回错误码61的解决方案
返回错误码61的解决方案我记不住了,我是看了官方demo改的,不过可以看下面的配置设置,应该可以解决,如果不能解决,可以评论或联系我百度地图api定位的使用详解 1.获取密钥官网 2.下载SDK, ...
php 调用微信收货地址,php微信自动获取收货地址api用法实例详解
这篇文章主要介绍了php版微信自动获取收货地址api用法,结合实例形式分析了php版微信API接口调用与使用技巧,需要的朋友可以参考下微信公众平台现在是越来越强大了,我们可以通过各种api接口来与平 ...
东南亚（Lazada shoppe）自养号测评如何解决收货地址及ip问题详解
随着亚马逊封店潮的白热化,越来越多的卖家把重心转移到沃尔玛及东南亚市场.随着亚马逊大批卖家的重心转移,东南亚市场的测评需求量也越来越大.今天主要跟大家分享一下在测评过程当中如何解决收货地址及ip问题. ...
python获取某地铁站经纬度_python通过百度地图API获取某地址的经纬度详解
前言这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的,本文将给大家详细的介绍关于python通过百度地图A ...
php 调用微信收货地址,php版微信自动获取收货地址api用法示例
微信公众平台现在是越来越强大了,我们可以通过各种api接口来与平台对接获取对应的数据了,下面来看一个由php实现的微信自动获取收货地址api程序,具体如下. 关于接口的说明我就不介绍了,在官方可以看到 ...
淘宝API接口系列，获取购买到的商品订单列表，订单详情，订单物流，收货地址列表，买家信息，买家token，卖出的商品订单列表
custom自定义API操作 buyer_order_list获取购买到的商品订单列表 buyer_order_detail获取购买到的商品订单详情 buyer_order_express获取购买到的 ...
淘宝API接口系列，获取购买到的商品订单列表，卖出的商品订单列表，订单详情，订单物流，买家信息，收货地址列表，买家token
custom自定义API操作 buyer_order_list获取购买到的商品订单列表 buyer_order_detail获取购买到的商品订单详情 buyer_order_express获取购买到的 ...
小程序开发API之获取收货地址wx.chooseAddress
wx.chooseAddress(Object object) 调用前需要用户授权 scope.address 获取用户收货地址.调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址. 参 ...
uniapp学习API之——其他（授权、收货地址、发票抬头等）
授权 uni.authorize(OBJECT) 提前向用户发起授权请求.调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口.如果用户之前已经同意授权, ...

【地图API】收货地址详解2

【地图API】收货地址详解2相关推荐

最新文章

热门文章