谷歌地圖地理解析

地址解析就是將地址(如:貴州省貴陽市)轉換爲地理座標(如經度: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種屬性:

屬性 類型 描述
address string 需要解析的地名. 可選.
bounds LatLngBounds 經緯度搜索範圍. 可選.(我沒有具體試用過)
location LatLng(注意類型) 需要解析的經緯度. 可選.
region string 國家代碼. 可選.(我沒有具體試用過)

對於解析我們使用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_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

下面我們來實例一下實例代碼:

<!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>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章