这是运用google map api v3开发的地图应用,使用谷歌地图地址解析服务,主要实现经纬度和地名之间相互解析功能,同时实现了批量解析。

实现功能:

1. 经纬度查询(通常指的是查询地名的经纬度,最后获取的是经纬度)

2. 经纬度查找地名(和上面相反,指的是使用经纬度去查找地名,最后获取的是地名)

3. 批量解析功能(不必要为很多数据而烦恼,你可以一次性进行多个地名或者经纬度进行解析)

4. 地图跟进显示(每一次解析,谷歌地图位置都会显示当前解析最佳地理位置)

5. 解析结果清晰(解析后的结果会仔细显示在结果区域,如有解析错误,则显示错误原因)

在线地址:

http://map.www.yanue.net/geo.html

使用说明:

1.受当地法律限制与实际GPS经纬度略有偏差

2.建议使用IE8以上或使用Google Chrome或Firefox浏览器。

3.导入任务后,每秒查询2次(可以暂停操作)。

4.由于‘墙’的原因,地图可能会加载很满,如果长时间没有反应,请重新载入

5.地名查询经纬度时,每个地名按行输入,并点击‘解析地名’按钮即可

6.经纬度查询地名时,请以"纬度,经度"的格式按行输入,并点击‘解析经纬度’按钮即可

以上是详细介绍,另外,这个版本只能返回最佳的匹配地名或者经纬度。如果你需要解析出来的数据进行精确处理。请详见我的另外一篇文章:

http://www.yanue.net/archives/32.html

代码中主要是使用谷歌地图google.maps.Geocoder类进行地名或经纬度处理,该类具体使用方法见我的另我一篇文章

http://www.yanue.net/archives/217.html

最后我贴出实现代码,基本上都很详细的说明,非常简单,具体不明白可以联系我qq 642399406,欢迎大家拍砖

下载地址:http://map.yanue.net/geoBatch.rar

实现代码:

(你可以复制到本地试试)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<title>google map 经纬度批量在线查询工具 google map查询地名返回经纬度</title>
<meta name="author" content="yanue" />
<meta name="copyright" content="powered by yanue" />
<link rel="site" href="http://www.yanue.net/map" />
<script type="text/javascript">
	window.onload = function() {
		var geo = new  geoEach();
		var toLatLngBtn = document.getElementById('toLatLngBtn');
		//批量解析地名到经纬度
		toLatLngBtn.onclick = function(){
			var area = document.getElementById('addrs').value;
		  area=area.split('\n');
			var sh;
			var i = 0;
			sh = window.setInterval(function() {
				if (i < area.length) {
					geo.toLatLng(area[i]);
			} else {
				window.clearInterval(sh);
			}
			i++;
			}, 500);
		}
		//批量解析经纬度到地名
		var toAddressBtn = document.getElementById('toAddressBtn');
		toAddressBtn.onclick = function(){
			var latLngs = document.getElementById('latLngs').value;
		  latLngs = latLngs.split('\n');
			var sh;
			var i = 0;
			var sh = window.setInterval(function() {
				if (i < latLngs.length) {
					geo.toAddress(latLngs[i]);
				} else {
					window.clearInterval(sh);
				}
				i++;
			}, 500);
		}
	}
	/*
	* 函数名:  geoEach()
	* 功能:地名解析成经纬度,经纬度解析成地名
	* 作者:yanue
	* 使用方法:
	  //初始化
	  var geo = new  geoEach();
	  // 解析地名 传入值地名 结果:纬度lat,经度lng
	  geo.toLatLng(地名);
	  // 解析经纬度 传入值(纬度lat,经度lng):26.57, 106.72 结果是地名
	  geo.toAddress(经纬度字符串);
	*/
	function  geoEach() {
		//初始化地图
		 geoEach.map = new google.maps.Map(document.getElementById("map_canvas"),{
					center : new google.maps.LatLng(26.57, 106.72),
					zoom : 8,
					mapTypeId : google.maps.MapTypeId.ROADMAP
		});
		//添加一个marker
		 geoEach.marker = new google.maps.Marker({map:  geoEach.map,position: new google.maps.LatLng(26.57, 106.72)});
		//实例化Geocoder服务
		 geoEach.geocoder = new google.maps.Geocoder();
	}
	 geoEach.address = null;//需要解析的地名
	 geoEach.latLng = null;//需要解析的经纬度字符串
	 geoEach.prototype = {
		//解析地名
		toLatLng : function(address) {
			//接收
			 geoEach.address = address;
			//执行geocode解析地名
			 geoEach.geocoder.geocode({
				//传入地名
				'address' :  geoEach.address
			}, function(results, status) {
				//create div
				var newElement = window.document.createElement('p');
				if (status == google.maps.GeocoderStatus.OK) {
					//获取解析后的经纬度
					var location = results[0].geometry.location;
					//切换地图位置
					 geoEach.map.setCenter(location);
					 geoEach.marker.setPosition(location);

					// location is like (26.647449, 106.63014299999998) so we should clear '(' in zhe start of this string and ')' in end;
					var latLng = location.toString().substr(1,location.toString().indexOf(')') - 1);
					// insert innerHTML
					newElement.innerHTML =  geoEach.address + ":" + latLng;
				} else {
					// insert error innerHTML
					newElement.innerHTML =  geoEach.address + ":error " + status;
				}
				//append child
				document.getElementById('showResults').appendChild(newElement);
			});
		},
		//解析经纬度
		toAddress:function(latLng){
			 geoEach.latLng = latLng.toString();
			//去除中间所有空格,将中文','号替换成英文','并按','分割
			 geoEach.latLng =  geoEach.latLng.replace(/[(^\s+)(\s+$)]/g,"").replace(',',',').split(',');
			//第一个值为纬度并转化为float类型
			var lat = parseFloat( geoEach.latLng[0]);
			//第二个值为经度并转化为float类型
			var lng = parseFloat( geoEach.latLng[1]);
			//执行geocode解析经纬度
		   geoEach.geocoder.geocode({
		  	//传入经纬度
				'location' : new google.maps.LatLng(lat, lng)
			},function(results, status){
				//create div to show result
				var newElement = window.document.createElement('p')
			  if (status == google.maps.GeocoderStatus.OK) {
			  	//获取解析后的经纬度
					var location = results[0].geometry.location;
					//切换地图位置
					 geoEach.map.setCenter(location);
					 geoEach.marker.setPosition(location);
			  	//获取解析后的地址
			  	var address = results[0].formatted_address;
			    // insert result innerHTML
					newElement.innerHTML =  geoEach.latLng + ":" + address;
			  } else {
					// insert error innerHTML
					newElement.innerHTML =  geoEach.latLng + ":error " + status;
				}
				//append child
			  document.getElementById('showResults').appendChild(newElement);
			});
		}
	}
</script>
<style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 body{
   font-size:12px;
   line-height:160%;
 }
 #showResults{
   float:left;
 }
</style>
</head>
<body>
	<h2>批量解析地名</h2>
	请从下面输入你要解析的地名(每个地名隔一行)<br />
	输入完成后按‘批量解析’按钮<br />
	<textarea name="" id="addrs" cols="50" rows="5">贵阳</textarea>
	<button id='toLatLngBtn'>解析地名</button>
	<br />
	请从下面输入你要解析的经纬度(每个经纬度隔一行)格式(纬度lat,经度lng)<br />
	输入完成后按‘批量解析’按钮<br />
	<h2>批量解析经纬度</h2>
	<textarea name="" id="latLngs" cols="30" rows="5">26.57, 106.72</textarea>
	<button id='toAddressBtn'>解析经纬度</button>
	<div id="map_canvas" style='width: 300px; height: 200px;'></div>
	<div id="showResults"></div>
</body>
</html>