谷歌地图地理解析和反解析geocode.geocoder详解 谷歌Geocoder服务 实例代码
地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程。
地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国贵州省贵阳市南明区翠微巷7号 邮政编码: 550002)的过程。
受当地法律限制及各方面原因,国内很多地图并不包含地理解析和反解析功能(地理解析和反解析功能功能不够强悍),Google永远是最棒的。
要使用到Google map 地理解析和反解析功能,我们需要了解google.maps.Geocoder类,谷歌地图给我们提供了强大的api
下面我们来实现
- //初始化地图
- 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();
这样我们就可以进行地理解析和反解析了,使用代码:
- 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> | GeocoderAddressComponent s数组 |
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 | 解析结果的视图范围 |
(你有必要复制到本地试一下)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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) {
//一般情况下会有多个结果
//第一个结果为最佳匹配的结果(匹配地名最全的结果),这里只去第一个,其他的可以根据需要自己循环出来29. //格式化过后的地址
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>
文章转载自:点击打开链接