这是运用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>