谷歌地图地理解析

た入场券 2021-09-21 08:48 549阅读 0赞

## **微信搜索：“二十同学” 公众号，欢迎关注一条不一样的成长之路** ##

地址解析就是将地址(如：贵州省贵阳市)转换为地理坐标(如经度：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., GeocoderStatus))

i. `数据请求：其中需要进行请求的数据GeocoderRequest可为4种属性：`

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>address</code></td> 
   <td><code>string</code></td> 
   <td>需要解析的地名. 可选.</td> 
  </tr> 
  <tr> 
   <td><code>bounds</code></td> 
   <td><code>LatLngBounds</code></td> 
   <td>经纬度搜索范围. 可选.（我没有具体试用过）</td> 
  </tr> 
  <tr> 
   <td><code>location</code></td> 
   <td><code>LatLng（注意类型）</code></td> 
   <td>需要解析的经纬度. 可选.</td> 
  </tr> 
  <tr> 
   <td><code>region</code></td> 
   <td><code>string</code></td> 
   <td>国家代码. 可选.（我没有具体试用过）</td> 
  </tr> 
 </tbody> 
</table>

对于解析我们使用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.解析结果

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>address_components</code></td> 
   <td><code>Array.&lt;<a href="https://developers.google.com/maps/documentation/javascript/reference#GeocoderAddressComponent" rel="nofollow">GeocoderAddressComponent</a>&gt;</code></td> 
   <td><code>GeocoderAddressComponent</code>s数组</td> 
  </tr> 
  <tr> 
   <td><code>formatted_address</code></td> 
   <td><code>string</code></td> 
   <td>格式化后的最佳匹配地址（地名可小到街道）</td> 
  </tr> 
  <tr> 
   <td><code>geometry</code></td> 
   <td><code><a href="https://developers.google.com/maps/documentation/javascript/reference#GeocoderGeometry" rel="nofollow">GeocoderGeometry</a></code></td> 
   <td><code>GeocoderGeometry</code>&nbsp;对象</td> 
  </tr> 
  <tr> 
   <td><code>types</code></td> 
   <td><code>Array.</code></td> 
   <td>一个表示返回的地理编码元素的类型的字符串数组</td> 
  </tr> 
 </tbody> 
</table>

其中每一次解析成功后都会有上面的信息，我们最需要的就两样formatted\_address和geometry。而address\_components是一个地名数组，包含long\_name（比如只返回省市名称），short\_name和types，可以自己去试一下。

a. 格式化后的地名formatted\_address，只需直接调用即可b.geometry返回一个`GeocoderGeometry` 对象，其中又包含有4个属性

<table> 
 <thead> 
  <tr> 
   <th>Properties</th> 
   <th>Type</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>bounds</code></td> 
   <td><code><a href="https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds" rel="nofollow">LatLngBounds</a></code></td> 
   <td>解析出来的精确的界限</td> 
  </tr> 
  <tr> 
   <td><code>location</code></td> 
   <td><code><a href="https://developers.google.com/maps/documentation/javascript/reference#LatLng" rel="nofollow">LatLng</a></code></td> 
   <td>纬度/经度坐标</td> 
  </tr> 
  <tr> 
   <td><code>location_type</code></td> 
   <td><code><a href="https://developers.google.com/maps/documentation/javascript/reference#GeocoderLocationType" rel="nofollow">GeocoderLocationType</a></code></td> 
   <td>返回的<code>location类型</code></td> 
  </tr> 
  <tr> 
   <td><code>viewport</code></td> 
   <td><code><a href="https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds" rel="nofollow">LatLngBounds</a></code></td> 
   <td>解析结果的视图范围</td> 
  </tr> 
 </tbody> 
</table>

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

## 下面我们来实例一下实例代码： ##

<!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='width: 300px; height: 200px;'></div>
    </body>
    </html>

[https_developers.google.com_maps_documentation_javascript_reference_Geocoder]: https://developers.google.com/maps/documentation/javascript/reference#Geocoder