zoukankan      html  css  js  c++  java
  • 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程。

    地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国贵州省贵阳市南明区翠微巷7号 邮政编码: 550002)的过程。
    受当地法律限制及各方面原因,国内很多地图并不包含地理解析和反解析功能(地理解析和反解析功能功能不够强悍),Google永远是最棒的。废话不多说
    要使用到Google map 地理解析和反解析功能,我们需要了解google.maps.Geocoder类,谷歌地图给我们提供了强大的api,下面我们来实现
    1.初始化地图(最基本的,不解释)

     
    //初始化地图
    var 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
    });

    2.实例化谷歌Geocoder服务

     
    //实例化Geocoder服务
    var geocoder = new google.maps.Geocoder();

    这样我们就可以进行地理解析和反解析了,使用代码:

     geocoder.geocode(request:GeocoderRequest, callback:function(Array.<GeocoderResult>, GeocoderStatus))
     

    i.数据请求:

    其中需要进行请求的数据GeocoderRequest可为4种属性:

    属性类型描述
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >addressde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >stringde> 需要解析的地名. 可选.
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >boundsde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >LatLngBoundsde> 经纬度搜索范围. 可选.(我没有具体试用过)
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >locationde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >LatLng(注意类型)de> 需要解析的经纬度. 可选.
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >regionde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >stringde> 国家代码. 可选.(我没有具体试用过)

    对于解析我们使用address,反解析使用location(注意传入的类型),请求的话,至少选择一种。

    ii:结果处理:

    而对于回掉函数(即解析后返回的处理函数)包含两个内容,GeocoderResult(解析结果,数组类型)和GeocoderStatus(解析状态)
    1.解析状态是使用Geocoder()进行解析后返回的状态,包含5种:

    ERROR(谷歌地图服务可能出错)
    INVALID_REQUEST(GeocoderRequest无效,即输入的请求是错误的,可能是没有选择,或者属性写错)
    OK(解析完成,并有相应数据)
    OVER_QUERY_LIMIT(响应超时)
    REQUEST_DENIED(网页被禁止geocoder解析)
    UNKNOWN_ERROR(未知错误)
    ZERO_RESULTS(零结果)

    我们能用的就是状态为OK的情况
    2.解析结果

    属性类型描述
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >address_componentsde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >Array.<GeocoderAddressComponent>de> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >GeocoderAddressComponentde>s数组
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >formatted_addressde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >stringde> 格式化后的最佳匹配地址(地名可小到街道)
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >geometryde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >GeocoderGeometryde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >GeocoderGeometryde> 对象
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >typesde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >Array.<string>de> 一个表示返回的地理编码元素的类型的字符串数组

    其中每一次解析成功后都会有上面的信息,我们最需要的就两样formatted_address和geometry。而address_components是一个地名数组,包含long_name(比如只返回省市名称),short_name和types,可以自己去试一下。

    a. 格式化后的地名formatted_address,只需直接调用即可

    b.geometry返回一个de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >GeocoderGeometryde> 对象,其中又包含有4个属性

    PropertiesTypeDescription
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >boundsde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >LatLngBoundsde> 解析出来的精确的界限
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >locationde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >LatLngde> 纬度/经度坐标
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >location_typede> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >GeocoderLocationTypede> 返回的de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >location类型de>
    de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >viewportde> de style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; " >LatLngBoundsde> 解析结果的视图范围

    至此,所有关于地理解析和反解析就差不多说明完了,具体api参见https://developers.google.com/maps/documentation/javascript/reference#Geocoder

    感觉说的好晕!基于此我做了一个关于批量解析和反解析的应用,详见:http://map.yanue.net/geo.htmlhttp://map.yanue.net/toLatLng .使用详解:http://www.yanue.net/archives/207.html ,

    下面我们来实例一下

    实例代码:(你有必要复制到本地试一下)

     
    <!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>谷歌地图地理解析和反解析geocode.geocoder详解</title>
    <meta name="author" content="yanue" />
    <meta name="copyright" content="powered by yanue" />
    <link rel="site" href="http://map.yanue.net/" />
    <script type="text/javascript">
    window.onload = function() {
    //初始化地图
    var 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
    });
    //实例化Geocoder服务
    var geocoder = new google.maps.Geocoder();
     
    //1.地理解析过程
    //请求数据GeocoderRequest为address,值为'贵阳'
    geocoder.geocode({address:'贵阳'},function geoResults(results, status){
      //这里是回掉函数(即结果处理函数)
      //状态为Ok说明有结果
      if (status == google.maps.GeocoderStatus.OK) {
          //一般情况下会有多个结果
          //第一个结果为最佳匹配的结果(匹配地名最全的结果),这里只去第一个,其他的可以根据需要自己循环出来
          //格式化过后的地址
          alert('地理解析结果:'+results[0].formatted_address);
          //geometry是一个包含bounds(界限),location(纬度/经度坐标),location_type和viewport(视图范围)
          //获取解析后的经纬度      
            alert('地理解析结果:'+results[0].geometry.location);
      }else{
        alert(":error " + status);
      }
    });
     
    //2.地理反解析过程
    //请求数据GeocoderRequest为location,值类型为LatLng因此我们要实例化经纬度
    geocoder.geocode({location:new google.maps.LatLng(26.57, 106.72)},function geoResults(results, status){
      //这里处理结果和上面一模一样
      if (status == google.maps.GeocoderStatus.OK) {
          alert('地理反解析结果:'+results[0].formatted_address);
            alert('地理反解析结果:'+results[0].geometry.location);
      }else{
        alert(":error " + status);
      }
    });
    }
    </script>
    </head>
    <body>
        <div id="map_canvas" style=' 300px; height: 200px;'></div>
    </body>
    </html>

    至此,文章完

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

  • 相关阅读:
    jquery 筛选元素(1)
    jquery操作元素的位置
    jquery 操作css 选择器
    jquery 操作css 尺寸
    jquery 标签中的属性操作
    jquery基本选择器
    jquery表单属性筛选元素
    jquery属性值选择器
    jquery 层级选择器
    jquery的基本选择器
  • 原文地址:https://www.cnblogs.com/jhlong/p/5394738.html
Copyright © 2011-2022 走看看