HTML5 Geolocation API - визначення розташування користувача

В останніх версіях сучасних браузерів доступний об'єктgeolocation. Об'єкт geolocation є властивістю об'єкта navigator. Ми можемо перевірити підтримує браузер користувача об'єкт geolocation чи ні.

Якщо об'єкт navigator має властивості geolocation, то під час перевірки умов він поверне true, інакше — false.

Об'єкт geolocation має 3 методи:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

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

Потрібно врахувати, що метод getCurrentPosition() виконуєтьсяасинхронно. Це означає, що в нашому коді після виклику методу getCurrentPosition() інтерпретатор піде виконати код далі,не чекаючи на визначення розташування користувача. Але нам якось потрібно знати коли буде виконано місцезнаходження. І для цього ми можемо передати метод getCurrentPosition() callback функцію (функція зворотного виклику).

Функція зворотного дзвінка приймає один аргумент - position. У цьому аргументі прийде результат виконання методу getCurrentPosition().

Після виконання методу getCurrentPosition() в об'єкт position прийде дві властивості - це timestamp і coords. властивості Властивості timestamp - це час визначення розташування користувача в мілісекундах.

А в якості coords міститься в свою чергу властивості:

  • accuracy - точність (в метрах)
  • latitude - широта
  • longitude - довгота

Після виконання цього коду ми побачимо вікно з координатами та точність визначення розташування в метрах.

розташування

Давайте трохи покращуємо наш код.

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

Якщо є коди помилок і значення за промовчанням, ми можемо налаштувати ці значення. Для цього ми можемо передати третій аргумент методу getCurrentPosition() — це деякі параметри у вигляді об'єкта.

Параметри та значення за замовчуванням:

  • enableHighAccuracy — за замовчуванням false
  • timeout — за замовчуванням 0 (нуль)
  • maximumAge — за замовчуванням 0 (нуль)

enableHighAccuracy — Високоточне визначення розташування користувача (зазвичай використовується GPS, якщо є). Здебільшого це стосується мобільних пристроїв.

timeout — Час запиту та очікування відповіді. За замовчуванням нуль, тобто він буде до нескінченності вимагати, доки не отримає відповідь. Значення потрібно передати у мілісекундах.

maximumAge — кешування даних про розташування користувача. Значення потрібно передати у мілісекундах.

Будь-який з цих параметрів ми можемо передати в третій аргумент методу getCurrentPosition() як об'єкт.

Удругому уроці ми подивимося як можна використовуватиGoogle Map API таYandex Map API. Подивимося як можна вивести розташування користувача на карту і як можна намалювати маршрути.