用户需求：管理者需要录入一批商户，并在地图上把商户展示出来。但发现一些商户的地址描述并不清楚，导致商户位置出错。如何获得更加准确的商户位置呢？
分析：假设地址准确的，可以通过地址解析，得到准确的经纬度。假设地址缺失，我们通过人工打点的办法，获取精准的位置。可以参考淘宝的收货地址，如下图。
重点功能
功能一、地址解析
方法：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()]
});
}
全部源代码：
<!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'> </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>上述源码需要读者自行去高德地图api官方网站申请KEY
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程