Google Map API抓取地图坐标信息小程序
因为实验室需要全国城市乡镇的地理坐标，有Execl的地名信息，需要一一查找地方的经纬度。Google Map地图实验室提供自带的查找经纬度的方法，不过需要一个点一个点的手输入，过于繁琐，所以自己利用Google Map API编写了一个很小的程序，根据需要有多个版本，挺方便的。
不过还要提一下，利用Baidu Map API 的localsearch很方便查找位于一个城市的街道、城镇或其他信息，比如我要搜索北京市的所有肯德基的地理坐标，如下代码就可以满足：
<title>批量获取模糊搜索地址名称及坐标</title> <meta name="Keywords" content="批量,获取坐标,模糊搜索"> <meta name="Description" content="本网页提供了批量搜索地名并返回地址及坐标的功能！"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <P>搜索城市<input id="txtCity" type="text" value="北京市" /></n> <p>地名关键词<input id="txtSearch" type="text" value="肯德基" /> <input type="button" value="生成坐标序列" onclick="search()" /> </n> <p>显示结果<textarea id="txtResult" rows="10" cols="30" value="" /></textarea> <div id="divMap" style="width:400px;height:400px;border:solid 1px gray"></div> <script type="text/javascript"> function $(id){ return document.getElementById(id);//定义$,以便调用 } var map = new BMap.Map("divMap");//创建地图 var city=new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}}); function search(){ $("txtResult").value=""//每次生成前清空文本域 map.clearOverlays(); //清除地图上所有标记 var c=$("txtCity").value; city.search(c);//查找城市 var s=$("txtSearch").value; var ls = new BMap.LocalSearch(c); ls.search(s); var i=1; ls.setSearchCompleteCallback(function(rs){ if (ls.getStatus() == BMAP_STATUS_SUCCESS){ for(j=0;j<rs.getCurrentNumPois();j++) { var poi=rs.getPoi(j); map.addOverlay(new BMap.Marker(poi.point)); //如果查询到，则添加红色marker $("txtResult").value+= poi.title+":" +poi.point.lng+","+poi.point.lat+'\n'; } if(rs.getPageIndex!=rs.getNumPages()) { ls.gotoPage(i); i=i+1; } }});} </script> </body> </html>
不过由于百度地图坐标是经过加密的，没有办法和已知的WGS坐标联系起来，所以选择了放弃。而翻看了许多资料才发现，对应的Google Map API 则没有了localsearch这个函数（在10年左右封掉了），只能利用getLatLng()函数一个一个的查询
参考了网上的一个抓一个点的代码，该代码可以完成一个点一个点的查询经纬度的功能：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>地理位置坐标转换</title> <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true" type="text/javascript"></script> <script type="text/javascript"> window.g = {}; window.$ = function (id) { return document.getElementById(id) }; window.onload = function () { if (GBrowserIsCompatible()) { g.map = new GMap2($("map")); //加载google地图控件 g.map.addControl(new GLargeMapControl()); g.map.addControl(new GMapTypeControl()); g.map.addControl(new GScaleControl()); //实例化google客户端地理编码类(GClientGeocoder) g.geocoder = new GClientGeocoder(); g.getCoordinates = function (address) { g.geocoder.getLatLng( address, function (point) { if (point) { alert(point.lat()); alert(point.lng()); g.map.setCenter(point, 13); var marker = new GMarker(point); g.map.addOverlay(marker); var info = "<strong>" + address + "</strong><br />坐标: " + point.lat() + "," + point.lng(); $("info").innerHTML = info; marker.openInfoWindowHtml(info); marker.__address_info = info; GEvent.addListener(marker, "click", function () { g.map.setCenter(this.getLatLng()); this.openInfoWindowHtml(this.__address_info); $("info").innerHTML = info; }); } else { alert("无法解析: " + address); } } ) } $("btn_go").onclick = function () { g.getCoordinates($("address").value); } $("btn_go").onclick(); } else { alert('不支持的浏览器'); } } window.onunload = function () { GUnload(); } </script> <style media="screen"> body { margin: 0; padding: 0; font-size: 9pt; line-height: 1.5em; } #frame { width: 700px; margin: 20px auto 10px; } #form { margin: 0 0 10px; text-align: center; } #form input { border: 1px solid #ccc; font-size: 9pt; width: 200px; } #form button { font-size: 9pt; border: 1px solid #ccc; } #form button:hover { background: #eef; } #map { height: 400px; margin: 0 0 10px; border: 5px solid #ccc; } #vifix { text-align: center; } #vifix a { color: #f00; text-decoration: none; } #vifix a:hover { color: #f96; } </style> </head> <body> <div id="frame"> <div id="form"> 输入一个地址: <input id="address" value="杭州市西湖三潭印月" /> <button id="btn_go"> 获取坐标</button> </div> <div id="map"> </div> <div id="info"> </div> <div id="vifix"> Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a> / Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a> </div> </div> </body> </html>
我则是删除了其中的地图显示和标记的功能，简化之后的第一个版本是，必须按照一定的文本格式输入，循环查询多个地名坐标：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>地理位置坐标转换</title> <style media="screen"> body { margin: 0; padding: 0; font-size: 9pt; line-height: 1.5em; } #frame { width: 1200px; margin: 20px auto 10px; } #searchMap { margin: 0 0 10px; text-align: center; } # button { font-size: 9pt; border: 1px solid #ccc; } #txtRight,#txtLeft{ float: left; } #result{ margin-left: 200px; height: 200px; } #searchMap button:hover { background: #eef; } #vifix { text-align: center; } #vifix a { color: #f00; text-decoration: none; } #vifix a:hover { color: #f96; } </style> <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true" type="text/javascript"></script> <script type="text/javascript"> window.g = {}; window.$ = function (id) { return document.getElementById(id) }; window.onload = function () { if (GBrowserIsCompatible()) { g.map = new GMap2($("map")); //加载google地图控件 g.map.addControl(new GLargeMapControl()); g.map.addControl(new GMapTypeControl()); g.map.addControl(new GScaleControl()); //实例化google客户端地理编码类(GClientGeocoder) g.geocoder = new GClientGeocoder(); g.getCoordinates = function (address) { g.geocoder.getLatLng( address, function (point) { if (point) { var infoReasult =address+" "+point.lat() +" "+ point.lng()+'\n'; $("txtResult").value+=infoReasult // var infoArea=address+'\n'; //$("txtArea").value+=infoArea; } else { var unfound="没有查询到的点有：<br />"; $("unfound").innerHTML=unfound; $("unfound").innerHTML+=address+"<br />"; } } ) } $("btn_go").onclick = function () { $("info").innerHTML=""; $("txtResult").value=""; // $("txtArea").value=""; var strSearch=$("txtSearch").value; var addresses=strSearch.split('\n'); console.log(addresses); var strProvince=addresses[0].split('(')[0]; var strCity=addresses[1].split('(')[0]; var strTown=addresses[2].split('(')[0]; var strPrefix=strProvince+strCity+strTown; for(var i=3;i<addresses.length&&addresses[i]!="";i++){ // console.log(strPrefix+addresses[i]); g.getCoordinates(strPrefix+addresses[i]); } } $("btn_go").onclick(); } else { alert('不支持的浏览器'); } } window.onunload = function () { GUnload(); } </script> </head> <body> <div id="frame"> <div id="searchMap"> <p>输入查询的点（用回车分开）</p><button id="btn_go">获取坐标</button><br/> <textarea id="txtSearch" rows="20" cols="40"/>第一行为省份：江苏省(349街道，836镇， 第二行为城市：南京市(81街道，19镇) 第三行为市区：玄武区(7街道) 第四行以下为街道 如： 江苏省(349街道，836镇， 南京市(81街道，19镇) 玄武区(7街道) 锁金村街道 红山街道 </textarea> <div id="info"> </div> <div id="result"> <p>查询结果:</p> <div id="txtRight"><textarea id="txtResult" rows="10" cols="70" value="" /></textarea></div> <div id="unfound"> </div> </div> </div> <div id="map"> </div> <div id="vifix"> Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a> / Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a> </div> </div> </body> </html>
后来又由于实验室的要求，增加了分割的版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>地理位置坐标转换</title> <style media="screen"> body { margin: 0; padding: 0; font-size: 9pt; line-height: 1.5em; } #frame { width: 1200px; margin: 20px auto 10px; } #searchMap { margin: 0 0 10px; text-align: center; } # button { font-size: 9pt; border: 1px solid #ccc; } #txtArea{ } #txtRight,#txtLeft{ float: left; } #result{ margin-left: 200px; height: 200px; } #searchMap button:hover { background: #eef; } #vifix { text-align: center; } #vifix a { color: #f00; text-decoration: none; } #vifix a:hover { color: #f96; } </style> <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true" type="text/javascript"></script> <script type="text/javascript"> window.g = {}; window.$ = function (id) { return document.getElementById(id) }; window.onload = function () { if (GBrowserIsCompatible()) { g.map = new GMap2($("map")); //加载google地图控件 g.map.addControl(new GLargeMapControl()); g.map.addControl(new GMapTypeControl()); g.map.addControl(new GScaleControl()); //实例化google客户端地理编码类(GClientGeocoder) g.geocoder = new GClientGeocoder(); g.getCoordinates = function (address) { g.geocoder.getLatLng( address, function (point) { if (point) { var infoReasult =point.lat() +" "+ point.lng()+'\n'; $("txtResult").value+=infoReasult var infoArea=address+"\n"; $("txtArea").value+=infoArea; } else { var unfound="没有查询到的点有：<br />"; $("unfound").innerHTML=unfound; $("unfound").innerHTML+=address+"<br />"; } } ) } $("btn_go").onclick = function () { $("info").innerHTML=""; $("txtResult").value=""; $("txtArea").value=""; var strSearch=$("txtSearch").value; var addresses=strSearch.split('\n'); console.log(addresses); var strProvince=addresses[0].split('(')[0]; var strCity = new Array(); var strTown= new Array(); var strPrefix = new Array(); var k=0; for(var j=1;j<addresses.length&&addresses[j]!="";j++){ if(addresses[j].indexOf("市")>0){ strCity[k]=addresses[j].split('(')[0]; strTown[k]=addresses[j+1].split('(')[0]; strPrefix[k]=strProvince+strCity[k]+strTown[k]; for(var i=j+2;i<addresses.length&&addresses[i]!=""&&(addresses[i].indexOf("市")<0);i++){ //console.log(strPrefix[k]+addresses[i]); g.getCoordinates(strPrefix[k]+addresses[i]); } k=k+1; } } } function adressSplit(adresses){ if(adresses.indexOf("市")>0){ if(adresses.indexOf("区")>0){ return adresses.split("区")[1]; } else if(adresses.indexOf("县")>0){ return adresses.split("县")[1]; } else if(adresses.indexOf("旗")>0){ return adresses.split("旗")[1]; } else{ return adresses.split("市")[1]; } } else{ if(adresses.indexOf("区")>0){ return adresses.split("区")[1]; } } } $("btn_split").onclick=function(){ var strSearch=$("txtArea").value; console.log(sstrSearch); $("txtSplit").value=""; var sstrSearch=strSearch.split("\n"); for(var i=0;i<sstrSearch.length;i++){ var infoArea=adressSplit(sstrSearch[i])+"\n"; console.log(infoArea); //console.log(adressSplit(sstrSearch[i])); $("txtSplit").value+=infoArea; } } // $("btn_go").onclick(); } else { alert('不支持的浏览器'); } } window.onunload = function () { GUnload(); } </script> </head> <body> <div id="frame"> <div id="searchMap"> <p>输入查询的点（用回车分开）</p><button id="btn_go">获取坐标</button><br/> <textarea id="txtSearch" rows="20" cols="40"/>第一行为省份：江苏省(349街道，836镇， 第二行为城市：南京市(81街道，19镇) 第三行为市区：玄武区(7街道) 第四行以下为街道 如： 江苏省(349街道，836镇， 南京市(81街道，19镇) 玄武区(7街道) 锁金村街道 红山街道 </textarea> <div id="info"> </div> <div id="result"> <p>查询结果:</p> <div id="txtLeft"> <textarea id="txtArea" rows="10" cols="35" value="" /></textarea></div> <div id="txtRight"><textarea id="txtResult" rows="10" cols="40" value="" /></textarea></div> <button id="btn_split">分割</button><br/> <div id="txtRight"><textarea id="txtSplit" rows="10" cols="40" value="" /></textarea></div> <div id="unfound"> </div> </div> </div> <div id="map"> </div> <div id="vifix"> Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a> / Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a> </div> </div> </body> </html>
