Google Maps API - 地圖座標定位

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

方法一︰透過單擊地圖取得經緯度座標

var myMap = new GMap2(document.getElementById("my_map"));
var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);
myMap.setCenter(myLatLng, 15);
myMap.addControl(new GLargeMapControl());
document.getElementById('inLatLng').value = myLatLng.toString();

var myMarker = new GMarker( myLatLng );
myMap.addOverlay( myMarker );
  
GEvent.addListener(myMap, "click", function( overlay, point ){
      if(point){
       //設定標註座標
       myMarker.setLatLng(point);
       document.getElementById('inLatLng').value = point.toString();
      }
     });

LatLng︰

在上個單元『在地圖上新增標註』中，已大致介紹過 GEvent。在這同樣透過 GEvent.addListener(source, event, handler) 針對 GMap2 註冊一個事件處理程序 click，當滑鼠單擊地圖時會回傳兩個參數 overlay 及 point。如果單擊了某個標記，則該標記將通過 overlay 參數傳遞給事件處理程序，並且還在標記上觸發 click 事件。否則，被單擊點的地理坐標 GLatLng 將在 point 參數中傳遞。 所以在這個例子中，當單擊地圖某個點時使用 GMarker.setLatLng(point) 重新設定標註座標，並將所取得的座標值填入表單中的 inLatLng 欄位。  

方法二︰透過地址輸入取得經緯度座標

var myMap;
var myMarker
function load() {
 if (GBrowserIsCompatible()) {
  myMap = new GMap2(document.getElementById("my_map"));
  var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);
  myMap.setCenter(myLatLng, 15);
  myMap.addControl(new GLargeMapControl());
  document.getElementById('inLatLng').value = myLatLng.toString();
  
  myMarker = new GMarker( myLatLng );
  myMap.addOverlay( myMarker );
 }
}

function addressGps() {
 var myGeocoder = new GClientGeocoder();
 var address = document.getElementById('address').value;
 myGeocoder.getLatLng(address, function getRequest( point ){
       if(!point){
        alert('這個地址 Google 說不知道！');
       }else{
        //移動地圖中心點
        myMap.panTo( point );
        //設定標註座標
        myMarker.setLatLng(point);
        document.getElementById('inLatLng').value = point.toString();
       }
      });
}

Address︰

LatLng︰

這裡要介紹一個新的物件 GClientGeocoder 地址解析器，現在已經支援台灣大部分的地址解析，但目前中國地圖地址解析只支援市/縣/區級別的地址。可以透過 GClientGeocoder.getLatLng(address, callback) 的方法對指定的地址進行地址解析，並將結果以 GLatLng 回傳。 在這例子中還使用了 GMap2.panTo(center) 移動地圖中心點。避免當所查詢的地址位置在地圖可見範圍之外，造成使用者找不到的情況。  

補充︰透過經緯度座標取得地址
使用方法與透過地址輸入取得經緯度座標很像，只是改用 GClientGeocoder 的 getLocations(GLatLng, callback) 方法。

var myMap;
var myMarker
function load() {
 if (GBrowserIsCompatible()) {
  myMap = new GMap2(document.getElementById("my_map"));
  var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);
  myMap.setCenter(myLatLng, 15);
  myMap.addControl(new GLargeMapControl());
  
  myMarker = new GMarker( myLatLng );
  myMap.addOverlay( myMarker );
 }
}

function getAddress() {
 var strLatLng = document.getElementById('latlng').value;
 strLatLng = strLatLng.replace("(", "[");
 strLatLng = strLatLng.replace(")", "]");
 var arrLatLng = eval(strLatLng);
 var myLatLng = new GLatLng(arrLatLng[0], arrLatLng[1]);

 //移動地圖中心點
 myMap.panTo( myLatLng );
 //設定標註座標
 myMarker.setLatLng( myLatLng );
 
 var myGeocoder = new GClientGeocoder();
 myGeocoder.getLocations(myLatLng, function(addresses) {
        if(addresses.Status.code != 200) {
         alert("此座標沒有找到對應的地址 " + myLatLng.toUrlValue());
        } else { 
         var result = addresses.Placemark[0];
         myMarker.openInfoWindowHtml( result.address );
         document.getElementById('address').value = result.address;
        }
       });
}

LatLng︰

Address︰

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

參考︰
‧Ian 懶惰蟲筆記 http://ianjung1974.blogspot.com/2008/07/google-maps-api.html
‧class GMap2︰事件 click、panTo(center)
‧class GEvent︰addListener(source, event, handler)
‧class GMarker︰setLatLng(point)
‧class GClientGeocoder︰getLatLng(address, callback)、getLocations(GLatLng, callback)