谷歌地图地理解析和反解析geocode.geocoder详解 谷歌Geocoder服务 实例代码

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

地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国贵州省贵阳市南明区翠微巷7号 邮政编码: 550002)的过程。

受当地法律限制及各方面原因,国内很多地图并不包含地理解析和反解析功能(地理解析和反解析功能功能不够强悍),Google永远是最棒的。

要使用到Google map 地理解析和反解析功能,我们需要了解google.maps.Geocoder类,谷歌地图给我们提供了强大的api

下面我们来实现

1.初始化地图(最基本的,不解释)

  1. //初始化地图
  2. var map = new google.maps.Map(document.getElementById("map_canvas"),{
  3. center : new google.maps.LatLng(26.57, 106.72),
  4. zoom : 8,
  5. mapTypeId : google.maps.MapTypeId.ROADMAP
  6. });

2.实例化谷歌Geocoder服务

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

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

  1. geocoder.geocode(request:GeocoderRequest, callback:function(Array., GeocoderStatus))

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

属性 类型 描述
address string 需要解析的地名. 可选.
bounds LatLngBounds 经纬度搜索范围. 可选.(我没有具体试用过)
location LatLng(注意类型) 需要解析的经纬度. 可选.
region string 国家代码. 可选.(我没有具体试用过)

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

二  结果处理:而对于回掉函数(即解析后返回的处理函数)包含两个内容,GeocoderResult(解析结果,数组类型)和GeocoderStatus(解析状态)

1.解析状态是使用Geocoder()进行解析后返回的状态,包含5种:

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

我们能用的就是状态为OK的情况

2.解析结果

属性 类型 描述
address_components Array.<GeocoderAddressComponent> GeocoderAddressComponents数组
formatted_address string 格式化后的最佳匹配地址(地名可小到街道)
geometry GeocoderGeometry GeocoderGeometry 对象
types Array. 一个表示返回的地理编码元素的类型的字符串数组

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

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

(b).geometry返回一个GeocoderGeometry 对象,其中又包含有4个属性

Properties Type Description
bounds LatLngBounds 解析出来的精确的界限
location LatLng 纬度/经度坐标
location_type GeocoderLocationType 返回的location类型
viewport LatLngBounds 解析结果的视图范围

至此,所有关于地理解析和反解析就差不多说明完了,具体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

下面我们来实例一下实例代码:

(你有必要复制到本地试一下)

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
    6. <title>谷歌地图地理解析和反解析geocode.geocoder详解</title>
    7. <meta name="author" content="yanue" />
    8. <meta name="copyright" content="powered by yanue" />
    9. <link rel="site" href="http://map.yanue.net/" />
    10. <script type="text/javascript">
    11. window.onload = function() {
    12. //初始化地图
    13. var map = new google.maps.Map(document.getElementById("map_canvas"),{
    14. center : new google.maps.LatLng(26.57, 106.72),
    15. zoom : 8,
    16. mapTypeId : google.maps.MapTypeId.ROADMAP
    17. });
    18. //实例化Geocoder服务
    19. var geocoder = new google.maps.Geocoder();
    20. //1.地理解析过程
    21. //请求数据GeocoderRequest为address,值为'贵阳'
    22. geocoder.geocode({address:'贵阳'},function geoResults(results, status){
    23. //这里是回掉函数(即结果处理函数)
    24. //状态为Ok说明有结果
    25. if (status == google.maps.GeocoderStatus.OK) {
    26. //一般情况下会有多个结果
    27. //第一个结果为最佳匹配的结果(匹配地名最全的结果),这里只去第一个,其他的可以根据需要自己循环出来
    28. //格式化过后的地址
    29. alert('地理解析结果:'+results[0].formatted_address);
    30. //geometry是一个包含bounds(界限),location(纬度/经度坐标),location_type和viewport(视图范围)
    31. //获取解析后的经纬度
    32. alert('地理解析结果:'+results[0].geometry.location);
    33. }else{
    34. alert(":error " + status);
    35. }
    36. });
    37. //2.地理反解析过程
    38. //请求数据GeocoderRequest为location,值类型为LatLng因此我们要实例化经纬度
    39. geocoder.geocode({location:new google.maps.LatLng(26.57, 106.72)},function geoResults(results, status){
    40. //这里处理结果和上面一模一样
    41. if (status == google.maps.GeocoderStatus.OK) {
    42. alert('地理反解析结果:'+results[0].formatted_address);
    43. alert('地理反解析结果:'+results[0].geometry.location);
    44. }else{
    45. alert(":error " + status);
    46. }
    47. });
    48. }
    49. </script>
    50. </head>
    51. <body>
    52. <div id="map_canvas" style='width: 300px; height: 200px;'></div>
    53. </body>
    54. </html>

最新文章

  1. StringByAppendingPathComponent和stringByAppendingString的区别
  2. 利用IronJs在.NET程序里面跑javascript脚本
  3. RequestContextListener有什么用
  4. JavaScript单例模式
  5. .NET基础拾遗(3)字符串、集合和流3
  6. hdu 2391 Filthy Rich
  7. python常用函数年初大总结
  8. GIT团队开发操作
  9. xampp运行MySQL shutdown unexpectedly解决方案
  10. 小程序问题集:保存失败:Error: ENOENT: no such file or directory, open
  11. Java 中的悲观锁和乐观锁的实现
  12. ansj分词原理
  13. STL——set
  14. Python通过正则表达式去除(过滤)HTML标签,提取文字
  15. TP关联模型
  16. 《Java程序猿面试笔试宝典》之Java程序初始化的顺序是如何的
  17. Diameter协议摘要
  18. 【总结整理】webGIS须知
  19. 阻止关闭窗口,FormCloseQuery
  20. linux安装svn客户端subversion及使用方法

热门文章

  1. 卡方检验(Chi-square test/Chi-Square Goodness-of-Fit Test)
  2. 【BestCoder】【Round#41】
  3. Spark一个简单案例
  4. MySQL冷知识
  5. 剑指offer-序列化二叉树
  6. Proxy 代理模式 动态代理 CGLIB
  7. 使用泛型集合取代datatable作为返回值实现面向对象
  8. kettle根据参数动态派生列
  9. 在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
  10. iptables日志与limit参数