反地址解析

当前坐标信息:

地址信息:
所属城市:
所属省份:

点击地图得到该点的坐标后会把该坐标解析成具体的地址,显示在地图的上方信息栏中

关键代码

function callback(a){
	var geometry=a.data[0];
	var address = document.getElementById("address");
	var city = document.getElementById("city");
	var province = document.getElementById("province");
	
	address.innerHTML = geometry.address;
	city.innerHTML = geometry.city;
	province.innerHTML = geometry.province;
}
sogou.maps.event.addListener(map,"click",function(mouseEvent){
	   var point = mouseEvent.point;
	   var pe = document.getElementById("point");
	   pe.innerHTML = mouseEvent.point;
	   
	   map.clearAll();//清除标记
	   var marker = new sogou.maps.Marker({ //在单击出增加一个标记
	   		map:map,
	   		position:point
	   });
	   
	   var request={
		     location:{
		          points:[point],
		          type:0
		    }
		}
		
		var geo=new sogou.maps.Geocoder();
		geo.geocode(request,callback);
 });
			

代码解析

首先要给地图添加单击事件,单击地图时获得改点坐标,再初始化一个Geocoder实例,设置请求参数继而调用geocode方法。

sogou.maps.event.addListener(map,"click",function(mouseEvent){ //给地图添加单击事件,点击获得坐标信息
	   var point = mouseEvent.point;
	   var pe = document.getElementById("point");
	   pe.innerHTML = mouseEvent.point;
	   
	    var request={
		     location:{
		          points:[point],//获得坐标点
		          type:0
		    }
		}
		
		var geo=new sogou.maps.Geocoder();
		geo.geocode(request,callback);
 });
			

接下来将坐标解析出来的的结果返回给回调函数,将取到的信息显示在信息栏中。

function callback(a){//回调函数 标点
    var geometry=a.data[0];//在结果集中取得第一个值
	var address = document.getElementById("address");
	var city = document.getElementById("city");
	var province = document.getElementById("province");
	
	address.innerHTML = geometry.address;
	city.innerHTML = geometry.city;
	province.innerHTML = geometry.province;

};
			

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>反地址解析</title>
<style type="text/css">
 	#map {
		width:500px;
		height:500px;
	}
	
	#position {
		padding:5px;
		width:500px;
		border:solid 1px #CCCCCC;
	}
</style>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
</head>

<body>
   <div id="position">
		<div>
			<strong>当前坐标信息:</strong><span id="point"></span>
		</div>
		<hr />
		<div>
			<strong>地址信息:</strong><span id="address"></span>
			<br />
			<strong>所属城市:</strong><span id="city"></span>
			<br />
			<strong>所属省份:</strong><span id="province"></span>
		</div>
	</div>
	<div id="map"></div>
</body>
<script>
/**
*反地址解析
*/
var myLatLng = new sogou.maps.Point(12957062,4827187);
var myOptions = {
  zoom: 10,
  center: myLatLng
};
var map = new sogou.maps.Map(document.getElementById("map"), myOptions);
 
function callback(a){
	var geometry=a.data[0];
	var address = document.getElementById("address");
	var city = document.getElementById("city");
	var province = document.getElementById("province");
	
	address.innerHTML = geometry.address;
	city.innerHTML = geometry.city;
	province.innerHTML = geometry.province;
}
sogou.maps.event.addListener(map,"click",function(mouseEvent){
	   var point = mouseEvent.point;
	   var pe = document.getElementById("point");
	   pe.innerHTML = mouseEvent.point;
	   
	   map.clearAll();//清除标记
	   var marker = new sogou.maps.Marker({ //在单击出增加一个标记
	   		map:map,
	   		position:point
	   });
	   
	   var request={
		     location:{
		          points:[point],
		          type:0
		    }
		}
		
		var geo=new sogou.maps.Geocoder();
		geo.geocode(request,callback);
 });
</script>
</html>
			

运行代码