【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

使用 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 物件。



沒有留言: