zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    koa中静态文件资源中间件实现
    js数组扁平化
    js读写txt文件
    JDBC配置MSSQL
    Eclipse报错:Setting property 'source' to 'org.eclipse.jst.jee.server:xx' did not find a matching property
    JSON字符串的生成
    以POST方式推送JSON数据,并接收返回的服务器消息
    C# XML与Json之间相互转换实例详解
    eclipse配置Tomcat服务器server locations的方法
    uwsgi基础——SNMP
  • 原文地址:https://www.cnblogs.com/sansan/p/3595921.html
Copyright © 2011-2022 走看看