freeCodeCamp/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7faf367417b2b2512be8	根據地理位置數據找到用戶的 GPS 座標	6	18188	get-geolocation-data-to-find-a-users-gps-coordinates

--description--

你還能做一件很酷的事就是訪問你用戶當前的地理位置。 每個瀏覽器都有內置的導航器，可以爲你提供這些信息。

導航器會獲取用戶當前的經度和緯度。

您將看到允許或阻止此站點了解您當前位置的提示。 只要代碼正確，挑戰就可以以任何一種方式完成。

通過選擇允許，你將看到輸出手機上的文本更改爲你的緯度和經度

這是執行此操作的代碼：

if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function(position) {
    document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
  });
}

首先，它檢查navigator.geolocation對象是否存在。 如果是，getCurrentPosition則調用該對象上的方法，該方法啓動對用戶位置的異步請求。 如果請求成功，則運行方法中的回調函數。 此函數position使用點表示法訪問對象的緯度和經度值，並更新頁面。

--instructions--

在script標記內添加示例代碼以檢查用戶的當前位置並將其插入 HTML

--hints--

應該使用 navigator.geolocation 訪問用戶的當前位置。

assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));

應該使用 position.coords.latitude 顯示用戶的緯度位置。

assert(code.match(/position\.coords\.latitude/g));

應該使用 position.coords.longitude 顯示用戶的經度位置。

assert(code.match(/position\.coords\.longitude/g));

應該在具有 id="data" 的 div 元素中顯示用戶的位置。

assert(
  code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)
);

--seed--

--seed-contents--

<script>
  // Add your code below this line


  // Add your code above this line
</script>
<h4>You are here:</h4>
<div id="data">

</div>

--solutions--

<script>
  // Add your code below this line
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
    });
  }
  // Add your code above this line
</script>
<h4>You are here:</h4>
<div id="data">

</div>

</section>