使用 HTML5 Geolocation API 標註目前位置



按一下取得地理位置按鈕,第一次會出現提示畫面(以Chrome為例),表示這個網頁程式將會取得裝置的位置資訊:



按下「允許」,接著會顯示目前你這台裝置所在位置附近的地圖。


在《使用 Google Maps API》這一篇文章中,說明了如何利用Google Maps API 於網頁顯示地圖,其中預先指定了地圖的中央地標經緯度,以其為中心點呈現附近的地圖;由於 HTML5 的 Geolocation API可以直接取得使用者瀏覽網頁的裝置所在位置經緯度,因此結合這兩者可以快速實作地理定位網頁;要取得地理定位資訊,必須透過 geolocation 的調用,所需的程式碼如下:

var g = window.navigator.geolocation;
g.getCurrentPosition(succ, errorCallback); //取得目前的地理位置資訊

g 是一個 Geolocation 物件,其中調用了 getCurrentPosition() ,並設定回呼函式的名稱,當 getCurrentPosition() 調用完成,其回呼函式 succ 的事件參數中,可以進一步取得目前的經緯度座標位置,程式如下:

function succ(event) {
        var l = event.coords.latitude;
        var y = event.coords.longitude;        
    }

以下的 Google Maps API 標示地圖上目前的座標點:

var marker = new google.maps.Marker(position: ly, map: mapdisplay });

其中建立一個 Marker 物件,並且在其建構函式中,指定兩個屬性參數, position 為地圖上所要標示的經緯度座標,指定一個封裝特定位置資訊的 google.maps.LatLng 物件,由於上述調用geolocation 物件的程式中,我們已取出 經緯度座標 (l,y),現在將其封裝如下:

var ly= new google.maps.LatLng(l,y);

變數 ly 當作參數指定給 position 即可;  map 則是網頁上呈現的地圖內容,也就是稍早所討論的 google.maps.Map 物件。



沒有留言: