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

取得使用者所在的經緯度除了可以使用Google Maps 的Geolocation API ，也可以透過網頁瀏覽器來實現，這篇文章將會介紹兩種取得所在位置經緯度的方法，接著使用地圖 ... ARCHIVE ABOUT CONTACT Designthinkingiseverywhere GoogleMapsAPI-取得目前經緯度並標記 取得使用者所在的經緯度除了可以使用GoogleMaps的GeolocationAPI ，也可以透過網頁瀏覽器來實現，這篇文章將會介紹兩種取得所在位置經緯度的方法，接著使用地圖標記Marker標示在地圖上。

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

接著我們簡單寫個JavaScript，利用XMLHttpRequest的方法呼叫GeolocationAPI，就能從console裡得到準確度accuracy(公尺)和經緯度資訊。

(至於準不準，看到文章最後你就知道了) 範例：GeolocationAPI取得所在位置經緯度 vargeolocation='https://www.googleapis.com/geolocation/v1/geolocate?key=你的APIKey'; (function(){ xhr=newXMLHttpRequest(); xhr.open('POST',geolocation); xhr.onload=function(){ varresponse=JSON.parse(this.responseText); console.log(response); } xhr.send(); })(); navigator.geolocation 除了申請GeolocationAPI之外，我們還能使用一個更簡單的方法navigator.geolocation，這是單純透過瀏覽器取得使用者所在的地理位置資訊，取得的資訊都會存在coords裡，總共有下列幾個方法： 方法 說明 latitude 緯度 longitude 經度 accuracy 精確度(公尺) altitude 海拔高度 altitudeAccuracy 海拔高度精確度 heading 方向(正北的順時針方向) speed 速度 然而要取得這些數值，可以透過getCurrentPosition()或watchPosition()來取得，兩個的差別在於getCurrentPosition()僅會執行一次，而watchPosition()則會隨著裝置的位置移動而持續監測，舉例來說，當使用者打開具備下面這段程式碼的網頁，網頁就會不斷偵測使用者位置，並在Google地圖上標記一個marker。

範例：navigator.geolocation取得所在位置經緯度 varmap,marker,lat,lng; functioninitMap(){ navigator.geolocation.watchPosition((position)=>{ console.log(position.coords); lat=position.coords.latitude; lng=position.coords.longitude; //初始化地圖 map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:18, center:{lat:lat,lng:lng} }); marker=newgoogle.maps.Marker({ position:{lat:lat,lng:lng}, map:map }); }); } 兩者差異 目前我自己實測起來，navigator.geolocation比GeolocationAPI還來得準確，畢竟navigator.geolocation是把瀏覽器所有可用的資訊拿出來用(WiFi位置、GPS、陀螺儀...等)，然而GeolocationAPI看起來就只是透過WiFi的三角定位來判斷，下面的例子是同時用navigator.geolocation和GeolocationAPI在地圖上標記，相差真是十萬八千里... 範例：navigator.geolocation取得所在位置經緯度 小結 如果是使用手機，得到的位置相對而言就會更精準，甚至還會有海拔高度或指南針之類的訊息，但如果是使用iPhone或iPad，那麼就只能透過Safari來實現，因為iPhone或iPad的Chrome並不支援(安全性限制)，總而言之，能取得自己的位置資訊，好像就能玩些「大地遊戲」的應用了，之後有時間再找時間做出來玩玩吧！ BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO