--- tags: Javascript --- # JS取得目前瀏覽器位置 ## 介紹 [Navigator.geolocation DOC](https://developer.mozilla.org/zh-TW/docs/Web/API/Navigator/geolocation) `Navigator.geolocation` 回傳一個唯讀的 `Geolocation` 物件，透過這個物件可以存取設備的位置訊息。同時也允許網站或應用程式根據使用者的位置提供客製化的結果。 該 `Geolocation.getCurrentPosition()`方法獲取當前位置，範例如下 `navigator.geolocation.getCurrentPosition(success, error, [options])` ```javascript= var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; console.log('Your current position is:'); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function error(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } navigator.geolocation.getCurrentPosition(success, error, options); ``` ## 實作 ```htmlmixed= <!DOCTYPE html> <html> <meta charset="utf-8" /> <body> <button onclick="getLocation()">取得您目前所在位置的經緯度</button> <p id="msg"></p> <script> var m = document.getElementById("msg"); function getLocation() { //取得 經緯度 if (navigator.geolocation) { // navigator.geolocation.getCurrentPosition(showPosition); //有拿到位置就呼叫 showPosition 函式 } else { m.innerHTML = "您的瀏覽器不支援 顯示地理位置 API ，請使用其它瀏覽器開啟 這個網址"; } } function showPosition(position) { m.innerHTML = " 緯度 (Latitude): " + position.coords.latitude + "<br>經度 (Longitude): " + position.coords.longitude; } </script> </body> </html> ``` 接下來實測看看 ![](https://i.imgur.com/Xua1a5u.gif) 成功拉!!!