freeCodeCamp

2.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7faf367417b2b2512be8	Get Geolocation Data to Find A User's GPS Coordinates	6		获取地理位置数据以查找用户的GPS坐标

Description

您可以做的另一件很酷的事情是访问您用户的当前位置。每个浏览器都有一个内置的导航器，可以为您提供此信息。导航器将获得用户当前的经度和纬度。您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。通过选择允许，您将看到输出手机上的文本更改为您的纬度和经度。这是执行此操作的代码：

if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
document.getElementById（'data'）。innerHTML =“latitude：”+ position.coords.latitude +“<br>经度：”+ position.coords.longitude;
}）;
}

首先，它检查navigator.geolocation对象是否存在。如果是，则调用该对象上的getCurrentPosition方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数使用点表示法访问position对象的纬度和经度值，并更新HTML。

Instructions

在script标记内添加示例代码以检查用户的当前位置并将其插入HTML。

Tests

tests:
  - text: 您的代码应使用<code>navigator.geolocation</code>来访问用户的当前位置。
    testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
  - text: 您的代码应使用<code>position.coords.latitude</code>来显示用户的纬度位置。
    testString: assert(code.match(/position\.coords\.latitude/g));
  - text: 您的代码应使用<code>position.coords.longitude</code>来显示用户的纵向位置。
    testString: assert(code.match(/position\.coords\.longitude/g));
  - text: 您应该在<code>data</code> div元素中显示用户的位置。
    testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g));

Challenge Seed

<script>
  // Add your code below this line


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

</div>

Solution

// solution required

2.6 KiB Raw Blame History Unescape Escape