注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

①嗰亽挺ぬ

莈亽噯,僦洎巳噯洎巳

 
 
 

日志

 
 
 
 

谷歌地图地理解析和反解析geocode.geocoder详解  

2013-06-04 11:38:02|  分类: web开发~js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

(原创)谷歌地图地理解析和反解析geocode.geocoder详解

作者:yanue    发表于: 六月 09, 2012    分类:Google Map原创专区   标签:地理解析   9回应 浏览 7,797热度

地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度: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种属性:

属性类型描述
addressstring需要解析的地名. 可选.
boundsLatLngBounds经纬度搜索范围. 可选.(我没有具体试用过)
locationLatLng(注意类型)需要解析的经纬度. 可选.
regionstring国家代码. 可选.(我没有具体试用过)

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

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

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

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

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

PropertiesTypeDescription
boundsLatLngBounds解析出来的精确的界限
locationLatLng纬度/经度坐标
location_typeGeocoderLocationType返回的location类型
viewportLatLngBounds解析结果的视图范围

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

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

下面我们来实例一下

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

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

至此,文章完

原创文章,转载请注明: 转载自半叶寒羽

  评论这张
 
阅读(62)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017