---
# System prepended metadata

title: JS取得目前瀏覽器位置
tags: [Javascript]

---

---
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)

成功拉!!!
