Google Maps API - 地圖座標定位

在程式的應用上可以利用 Google Maps API 取得經緯度座標，這裡介紹兩種取得經緯度座標的方法。

方法一︰透過單擊地圖取得經緯度座標
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);<br />myMap.setCenter(myLatLng, 15);<br />myMap.addControl(new GLargeMapControl());<br />document.getElementById('inLatLng').value = myLatLng.toString();<br /><br />var myMarker = new GMarker( myLatLng );<br />myMap.addOverlay( myMarker );<br /> <br />GEvent.addListener(myMap, "click", function( overlay, point ){<br /> if(point){<br /> //設定標註座標<br /> myMarker.setLatLng(point);<br /> document.getElementById('inLatLng').value = point.toString();<br /> }<br /> });<br />
<br />LatLng︰<input id="inLatLng" name="inLatLng" type="text" size="40" value="" /><br />
看範例所呈現的結果

在上個單元『在地圖上新增標註』中，已大致介紹過 GEvent。在這同樣透過 GEvent.addListener(source, event, handler) 針對 GMap2 註冊一個事件處理程序 click，當滑鼠單擊地圖時會回傳兩個參數 overlay 及 point。如果單擊了某個標記，則該標記將通過 overlay 參數傳遞給事件處理程序，並且還在標記上觸發 click 事件。否則，被單擊點的地理坐標 GLatLng 將在 point 參數中傳遞。

所以在這個例子中，當單擊地圖某個點時使用 GMarker.setLatLng(point) 重新設定標註座標，並將所取得的座標值填入表單中的 inLatLng 欄位。

方法二︰透過地址輸入取得經緯度座標
<br />var myMap;<br />var myMarker<br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> myMap = new GMap2(document.getElementById("my_map"));<br /> var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);<br /> myMap.setCenter(myLatLng, 15);<br /> myMap.addControl(new GLargeMapControl());<br /> document.getElementById('inLatLng').value = myLatLng.toString();<br /> <br /> myMarker = new GMarker( myLatLng );<br /> myMap.addOverlay( myMarker );<br /> }<br />}<br /><br />function addressGps() {<br /> var myGeocoder = new GClientGeocoder();<br /> var address = document.getElementById('address').value;<br /> myGeocoder.getLatLng(address, function getRequest( point ){<br /> if(!point){<br /> alert('這個地址 Google 說不知道！');<br /> }else{<br /> //移動地圖中心點<br /> myMap.panTo( point );<br /> //設定標註座標<br /> myMarker.setLatLng(point);<br /> document.getElementById('inLatLng').value = point.toString();<br /> }<br /> });<br />}<br />
<br />Address︰<input id="address" name="address" type="text" size="40" value="" /><br /><input name="button" type="button" value="Search" onclick="javascript:addressGps();" /><br />LatLng︰<input id="inLatLng" name="inLatLng" type="text" size="40" value="" /><br />
看範例所呈現的結果

這裡要介紹一個新的物件 GClientGeocoder 地址解析器，現在已經支援台灣大部分的地址解析，但目前中國地圖地址解析只支援市/縣/區級別的地址。可以透過 GClientGeocoder.getLatLng(address, callback) 的方法對指定的地址進行地址解析，並將結果以 GLatLng 回傳。

在這例子中還使用了 GMap2.panTo(center) 移動地圖中心點。避免當所查詢的地址位置在地圖可見範圍之外，造成使用者找不到的情況。

補充︰透過經緯度座標取得地址 (2009/01/02)

使用方法與透過地址輸入取得經緯度座標很像，只是改用 GClientGeocoder 的 getLocations(GLatLng, callback) 方法。
<br />var myMap;<br />var myMarker<br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> myMap = new GMap2(document.getElementById("my_map"));<br /> var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);<br /> myMap.setCenter(myLatLng, 15);<br /> myMap.addControl(new GLargeMapControl());<br /> <br /> myMarker = new GMarker( myLatLng );<br /> myMap.addOverlay( myMarker );<br /> }<br />}<br /><br />function getAddress() {<br /> var strLatLng = document.getElementById('latlng').value;<br /> strLatLng = strLatLng.replace("(", "[");<br /> strLatLng = strLatLng.replace(")", "]");<br /> var arrLatLng = eval(strLatLng);<br /> var myLatLng = new GLatLng(arrLatLng[0], arrLatLng[1]);<br /><br /> //移動地圖中心點<br /> myMap.panTo( myLatLng );<br /> //設定標註座標<br /> myMarker.setLatLng( myLatLng );<br /> <br /> var myGeocoder = new GClientGeocoder();<br /> myGeocoder.getLocations(myLatLng, function(addresses) {<br /> if(addresses.Status.code != 200) {<br /> alert("此座標沒有找到對應的地址 " + myLatLng.toUrlValue());<br /> } else { <br /> var result = addresses.Placemark[0];<br /> myMarker.openInfoWindowHtml( result.address );<br /> document.getElementById('address').value = result.address;<br /> }<br /> });<br />}<br />
<br />LatLng︰<input id="latlng" name="latlng" type="text" size="40" value="(25.037525, 121.563782)" /><br /><input name="button" type="button" value="Search" onclick="javascript:getAddress();" /><br />Address︰<input id="address" name="address" type="text" size="40" value="" /><br />
看範例所呈現的結果

不過所查詢出來的地址還是有點出入，例如︰我們透過地址（臺北市信義區市府路1號）所查出來的經緯度座標為（25.037525, 121.563782），但是用經緯度座標（25.037525, 121.563782）反查地址卻是（110台灣台北市信義區仁愛路四段）。

參考︰
‧class GMap2︰事件 click、panTo(center)
‧class GEvent︰addListener(source, event, handler)
‧class GMarker︰setLatLng(point)
‧class GClientGeocoder︰getLatLng(address, callback)、getLocations(GLatLng, callback)


更多教學文件在此︰Google Maps API - 前言及目錄