Google Maps API - 取得目前經緯度並標記

取得使用者所在的經緯度除了可以使用 Google Maps 的 Geolocation API ,也可以透過網頁瀏覽器來實現,這篇文章將會介紹兩種取得所在位置經緯度的方法,接著使用地圖標記 Marker 標示在地圖上。

Geolocation API

前往 Google Cloud Platform Console,建立新的專案或是選擇現有的專案 ( 不知道怎麼做可以參考 Google Maps API - 網頁載入地圖 ( 起手式 ) ),接著點選上方「啟用 API 和服務」,在搜尋欄位搜尋「Directions API」,找到後點選並且啟用。

Google Maps API - 取得目前經緯度並標記

接著我們簡單寫個 JavaScript,利用XMLHttpRequest的方法呼叫 Geolocation API,就能從 console 裡得到準確度 accuracy ( 公尺 ) 和經緯度資訊。( 至於準不準,看到文章最後你就知道了 )

範例:Geolocation API 取得所在位置經緯度

var geolocation = 'https://www.googleapis.com/geolocation/v1/geolocate?key=你的 API Key';
(function() {
    xhr = new XMLHttpRequest();
    xhr.open('POST', geolocation);
    xhr.onload = function () {
        var response = JSON.parse(this.responseText);
        console.log(response);
    }
    xhr.send();
})();

Google Maps API - 取得目前經緯度並標記

navigator.geolocation

除了申請 Geolocation API 之外,我們還能使用一個更簡單的方法navigator.geolocation,這是單純透過瀏覽器取得使用者所在的地理位置資訊,取得的資訊都會存在 coords 裡,總共有下列幾個方法:

方法 說明
latitude 緯度
longitude 經度
accuracy 精確度 ( 公尺 )
altitude 海拔高度
altitudeAccuracy 海拔高度精確度
heading 方向 ( 正北的順時針方向 )
speed 速度

然而要取得這些數值,可以透過getCurrentPosition()watchPosition()來取得,兩個的差別在於getCurrentPosition()僅會執行一次,而watchPosition()則會隨著裝置的位置移動而持續監測,舉例來說,當使用者打開具備下面這段程式碼的網頁,網頁就會不斷偵測使用者位置,並在 Google 地圖上標記一個 marker。

範例:navigator.geolocation 取得所在位置經緯度

var map, marker, lat, lng;
function initMap() {
    navigator.geolocation.watchPosition((position) => {
        console.log(position.coords);
        lat = position.coords.latitude;
        lng = position.coords.longitude;
        // 初始化地圖
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            center: { lat: lat, lng: lng }
        });
        marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map
        });
    });
}

Google Maps API - 取得目前經緯度並標記

兩者差異

目前我自己實測起來,navigator.geolocation 比 Geolocation API 還來得準確,畢竟 navigator.geolocation 是把瀏覽器所有可用的資訊拿出來用 ( WiFi 位置、GPS、陀螺儀...等 ),然而 Geolocation API 看起來就只是透過 WiFi 的三角定位來判斷,下面的例子是同時用 navigator.geolocation 和 Geolocation API 在地圖上標記,相差真是十萬八千里...

範例:navigator.geolocation 取得所在位置經緯度

Google Maps API - 取得目前經緯度並標記

小結

如果是使用手機,得到的位置相對而言就會更精準,甚至還會有海拔高度或指南針之類的訊息,但如果是使用 iPhone 或 iPad,那麼就只能透過 Safari 來實現,因為 iPhone 或 iPad 的 Chrome 並不支援 ( 安全性限制 ),總而言之,能取得自己的位置資訊,好像就能玩些「大地遊戲」的應用了,之後有時間再找時間做出來玩玩吧!

有興趣瞧瞧其他新文章嗎?