JS метод Geolocation.getCurrentPosition()


Загальний опис

getCurrentPosition — це метод об'єкта navigator.geolocation, який дозволяє отримати поточні координати користувача, такі як широта та довгота, використовуючи геолокаційні сервіси браузера. Цей метод асинхронний і приймає три параметри: функцію для обробки успішного виконання, функцію для обробки помилок та об'єкт параметрів, що дозволяє налаштувати поведінку запиту.

Функція successCallback, яка передається як перший параметр, викликається, коли геолокація успішно отримана. Вона отримує об'єкт position, який містить інформацію про координати користувача.

function success(position) {
    console.log(`Широта: ${position.coords.latitude}`);
    console.log(`Довгота: ${position.coords.longitude}`);
}

Другий параметр — це функція errorCallback, яка викликається, якщо сталася помилка під час отримання геолокації. Вона отримує об'єкт error, що містить код помилки і повідомлення.

function error(error) {
    console.warn(`Помилка: ${error.code} - ${error.message}`);
}

Третій параметр — це об'єкт options, який дозволяє налаштувати поведінку запиту. Наприклад, ви можете задати максимальний час на отримання геолокації або точність даних.

let options = {
    enableHighAccuracy: true,  // Включення високої точності
    timeout: 5000,             // Ліміт часу (5 секунд)
    maximumAge: 0              // Не використовувати кешовані дані
};

navigator.geolocation.getCurrentPosition(success, error, options);

Цей метод зазвичай застосовується для додатків, що використовують геолокаційні сервіси, таких як картографічні сервіси або додатки для відстеження місцезнаходження користувача в реальному часі.

автор: Bond

Порада

Якщо ваша програма працює в середовищі з обмеженою підтримкою геолокації (наприклад, на старих браузерах або девайсах), не забувайте перевіряти підтримку API через if ("geolocation" in navigator) перед виконанням запиту.

автор: Bond
Порада

Якщо потрібно регулярно отримувати оновлене місцезнаходження користувача, замість getCurrentPosition використовуйте метод watchPosition. Він дозволяє слідкувати за зміною координат у реальному часі.

автор: Bond
Порада

При створенні мобільних додатків, які використовують геолокацію, враховуйте, що браузери зазвичай запитують дозвіл на доступ до місцезнаходження лише один раз. Якщо користувач відмовиться, він не буде отримувати нові запити. Враховуйте це при розробці інтерфейсу.

автор: Bond

Синтаксис

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Повернення

Promise

Метод getCurrentPosition не повертає значення безпосередньо. Це асинхронний метод, що означає, що результат виконання обробляється через колбеки (функції зворотного виклику), які передаються як аргументи цього методу.

  • Успішний результат: Якщо геолокація була отримана успішно, то в перший параметр функції successCallback передається об'єкт position, який містить координати (широту та довготу) користувача, а також інші дані, як точність і висота (якщо доступні).

    • Наприклад, position.coords.latitude дає широту, а position.coords.longitude — довготу.
  • Помилка: Якщо виникла помилка, наприклад, користувач відмовився від надання доступу до геолокації, то другий параметр функції errorCallback міститиме об'єкт помилки, який включає код помилки (наприклад, PERMISSION_DENIED, POSITION_UNAVAILABLE, або TIMEOUT) і повідомлення про помилку.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
5 3.5 5 10.6 12 9
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 ≤3

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі користувач натискає кнопку для того, щоб отримати свої координати. Якщо дозволено доступ до геолокації, результат (широта та довгота) виводиться на екран. Якщо доступ заблоковано або інша помилка, користувач побачить відповідне повідомлення. Цей приклад демонструє роботу з API геолокації, обробку помилок і взаємодію з користувачем через кнопку та відображення результатів на сторінці.

автор: Bond

Цей приклад показує, як за допомогою геолокації користувача отримати його координати та на основі цих даних виконати запит до API для пошуку найближчих ресторанів. Це корисно в додатках, що надають користувачам інформацію про місця поруч.

navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    fetch(`https://api.yelp.com/v3/businesses/search?term=restaurants&latitude=${latitude}&longitude=${longitude}`)
        .then(response => response.json())
        .then(data => {
            data.businesses.forEach(restaurant => {
                console.log(`${restaurant.name} - ${restaurant.location.address1}`);
            });
        })
        .catch(error => console.error("Помилка при пошуку ресторанів:", error));
}, function(error) {
    console.error("Не вдалося отримати геолокацію:", error);
});
автор: Bond

У цьому прикладі ми отримуємо точне місцезнаходження користувача для використання у службах доставки. Це дозволяє точно визначити, де знаходиться користувач, і доставити товар саме до цієї точки.

navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`Точне місцезнаходження: Широта: ${latitude}, Довгота: ${longitude}`);
    // Наприклад, тут можна передавати ці координати до служби доставки.
}, function(error) {
    console.error("Не вдалося отримати геолокацію:", error);
});
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід