99 lines
3.6 KiB
Markdown
99 lines
3.6 KiB
Markdown
|
---
|
|||
|
|
id: 587d7faf367417b2b2512be8
|
|||
|
|
title: Отримання даних геолокації для знаходження GPS-координат користувача
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 18188
|
|||
|
|
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Інша зручна річ - доступ до поточної локації користувача. У кожен браузер вбудовано навігацію, яка надасть цю інформацію.
|
|||
|
|
|
|||
|
|
Навігація надає доступ до актуальної широти та довготи користувача.
|
|||
|
|
|
|||
|
|
Вам надійде запит на дозвіл або блокування доступу сайту до вашої локації. Завдання можна завершити будь-яким способом, якщо код буде правильним.
|
|||
|
|
|
|||
|
|
Якщо ви надасте доступ, побачите текст на телефоні виводу для зміни широти та довготи.
|
|||
|
|
|
|||
|
|
Ось такий код:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
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` об'єкта для широти і довготи за допомогою крапкової нотації і оновлює HTML.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Додайте приклад коду у теґи `script`, щоб дізнатись поточне розташування користувача і вставити його у HTML.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Щоб дізнатись поточне місце розташування користувача, використайте `navigator.geolocation`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Щоб відобразити координату широти місця знаходження користувача, використайте `position.coords.latitude`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/position\.coords\.latitude/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Щоб відобразити координату довготи місця знаходження користувача, використайте `position.coords.longitude`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/position\.coords\.longitude/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Положення користувача покажіть елементом `id="data"` всередині `div`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<script>
|
|||
|
|
// Add your code below this line
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Add your code above this line
|
|||
|
|
</script>
|
|||
|
|
<h4>You are here:</h4>
|
|||
|
|
<div id="data">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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>
|
|||
|
|
```
|