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="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+'
';
                        
                    }
                    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&amp;v=2&amp;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&amp;v=2&amp;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()+'
';

                            $("txtResult").value+=infoReasult

                           // var infoArea=address+'
';

                            //$("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('
');
                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&amp;v=2&amp;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()+'
';

                            $("txtResult").value+=infoReasult

                            
                            var infoArea=address+"
";

                             $("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('
');
                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("
");

                    for(var i=0;i<sstrSearch.length;i++){
                        var infoArea=adressSplit(sstrSearch[i])+"
";
                        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>
原文地址:https://www.cnblogs.com/sansan/p/3595921.html