1. Визначення поточного місця розташування користувача
2. TL; DR
3. Ситуації, в яких слід використовувати геолокацію
4. Визначення поточного місця розташування користувача
5. Тестування підтримки геолокації на вашому сайті
6. Завжди обробляйте помилки
7. Намагайтеся рідше запускати обладнання для геолокації
8. Не змушуйте користувача чекати, задайте тайм-аут
9. Приблизне місце розташування краще точного
10. Відстеження місця розташування користувача
11. TL; DR
12. Обов'язкова щоб зекономити заряд акумулятора пристрою
13. Завжди обробляйте помилки
14. Отримання згоди користувача на використання даних про його місцезнаходження
15. TL; DR
16. Використовуйте запасний варіант, якщо потрібні дані геолокації
17. Доступ до інформації про місцезнаходження завжди слід запитувати, орієнтуючись на дії користувача
18. Ясно давайте зрозуміти, що для виконання дії потрібні дані геолокації
19. Ненав'язливо натякніть користувачам, що вам необхідний доступ до даних геолокації

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

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

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

Визначення поточного місця розташування користувача

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

TL; DR

• Перед тим як використовувати API, завжди перевіряйте сумісність.
• Приблизне місце розташування краще точного.
• Завжди обробляйте помилки.
• "Чим рідше виконується опитування пристрою користувача, тим лучше_- з метою економії заряду акумулятора."

Використання API не залежить від пристрою; спосіб визначення місця розташування браузером не має значення, оскільки клієнти можуть запитувати і отримувати дані звичайним способом. Для цього може використовуватися GPS, Wi-Fi або просто прохання вручну ввести своє місце розташування. Оскільки на виконання будь-якого такого запиту потрібен якийсь час, API працює асинхронно; метод зворотного виклику відправляється йому кожен раз, коли ви запитуєте дані про місцезнаходження.

Ситуації, в яких слід використовувати геолокацію

• Пошук найближчих цікавлять користувача об'єктів на основі даних про місцезнаходження пристрою користувача.
• Надання інформації відповідно до розташування користувача (наприклад, новин).
• Вказівка ​​місця розташування користувача на карті.
• Додавання тегів, створених в додатку, з даними про місцезнаходження користувача (т. Е. Додавання геотегов до зображень).

Перевірка сумісності

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

Для цього достатньо перевірити, чи є в коді об'єкт "geolocation":

// check for Geolocation support if (navigator.geolocation) {console.log ( 'Geolocation is supported!'); } Else {console.log ( 'Geolocation is not supported for this Browser / OS version yet.'); }

Визначення поточного місця розташування користувача

В API геолокації є простий одноразовий метод отримання інформації про місцезнаходження користувача - getCurrentPosition (). При виклику цього методу виконується асинхронний запит даних про поточне місцезнаходження користувача.

window.onload = function () {var startPos; var geoSuccess = function (position) {startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude; }; navigator.geolocation.getCurrentPosition (geoSuccess); };

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

Крім того, в залежності від пристрою визначення місця розташування, використовуваного браузером, об'єкт "position" може містити не просто дані про широтою та довготою, а набагато більше інформації, наприклад, - відомості про висоту над рівнем моря або напрямку руху. Дізнатися, які додаткові відомості використовуються системою визначення місця розташування, можна тільки після того, як вона поверне дані.

Тестування підтримки геолокації на вашому сайті

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

За допомогою інструментів для розробників можна як перевизначати значення об'єкта "position" для параметра "navigator.geolocation", так і імітувати дані геолокації, відсутні в меню "Overrides".

1. У DevTools перейдіть в меню "Overrides".
2. Встановіть прапорець "Override Geolocation", потім введіть в поле "Lat =" значення "41.4949819", а в полі "Lon =" - значення "-0.1461206".
3. Оновлення сторінку, після чого для неї будуть використовуватися перевизначені вами координати для геолокації.

Завжди обробляйте помилки

На жаль, не всі спроби визначити місце розташування вінчаються успіхом. Причиною може послужити неможливість підключитися до системи GPS або раптове відключення користувачем функцій визначення місця розташування. У разі помилки викликається другий, додатковий аргумент для методу getCurrentPosition (), і ви можете додати в зворотний виклик відповідне повідомлення для користувача:

window.onload = function () {var startPos; var geoSuccess = function (position) {startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude; }; var geoError = function (position) {console.log ( 'Error occurred. Error code:' + error.code); // error.code can be: // 0: unknown error // 1: permission denied // 2: position unavailable (error response from location provider) // 3: timed out}; navigator.geolocation.getCurrentPosition (geoSuccess, geoError); };

Намагайтеся рідше запускати обладнання для геолокації

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

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

window.onload = function () {var startPos; var geoOptions = {maximumAge: 5 * 60 * 1000,} var geoSuccess = function (position) {startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude; }; var geoError = function (position) {console.log ( 'Error occurred. Error code:' + error.code); // error.code can be: // 0: unknown error // 1: permission denied // 2: position unavailable (error response from location provider) // 3: timed out}; navigator.geolocation.getCurrentPosition (geoSuccess, geoError, geoOptions); };

Не змушуйте користувача чекати, задайте тайм-аут

Якщо не поставити тайм-аут, відповідь на запит про місцезнаходження може так і не прийти.

window.onload = function () {var startPos; var geoOptions = {timeout: 10 * 1000} var geoSuccess = function (position) {startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude; }; var geoError = function (error) {console.log ( 'Error occurred. Error code:' + error.code); // error.code can be: // 0: unknown error // 1: permission denied // 2: position unavailable (error response from location provider) // 3: timed out}; navigator.geolocation.getCurrentPosition (geoSuccess, geoError, geoOptions); };

Приблизне місце розташування краще точного

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

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

window.onload = function () {var startPos; var geoOptions = {enableHighAccuracy: true} var geoSuccess = function (position) {startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude; }; var geoError = function (error) {console.log ( 'Error occurred. Error code:' + error.code); // error.code can be: // 0: unknown error // 1: permission denied // 2: position unavailable (error response from location provider) // 3: timed out}; navigator.geolocation.getCurrentPosition (geoSuccess, geoError, geoOptions); };

Відстеження місця розташування користувача

"За допомогою API геолокації можна визначити, в якому місці знаходиться користувач, і відстежувати його переміщення - завжди з його згоди

Використання API не залежить від пристрою; спосіб визначення місця розташування браузером не має значення, оскільки клієнти можуть запитувати і отримувати дані звичайним способом. Для цього може використовуватися GPS або Wi-Fi. Оскільки на виконання будь-якого такого запиту потрібен якийсь час, API працює асинхронно; метод зворотного виклику відправляється йому кожен раз, коли ви запитуєте дані про місцезнаходження.

TL; DR

• Перед тим як використовувати API, завжди перевіряйте сумісність.
• Зведіть до мінімуму відстеження місця розташування користувача для економії ресурсу акумулятора пристрою.
• Завжди обробляйте помилки.

Ситуації, в яких слід використовувати геолокацію для визначення місця розташування користувача

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

Відстеження місця розташування користувача

За допомогою API геолокації можна відстежувати місце розташування користувача (попередньо отримавши на це згоду користувача), викликавши один раз метод getCurrentPosition ().

Для безперервного відстежування місцеположення користувача в API геолокації передбачений метод watchPosition (). Він аналогічний методу getCurrentPosition (), тільки викликається кілька разів, у міру того як:

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

2. Місцезнаходження користувача змінюється.

   var watchId = navigator.geolocation.watchPosition (function (position) {document.getElementById ( 'currentLat'). innerHTML = position.coords.latitude; document.getElementById ( 'currentLon'). innerHTML = position.coords.longitude;}) ;

Обов'язкова щоб зекономити заряд акумулятора пристрою

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

Коли відстеження місця розташування більше не потрібно, викличте метод clearWatch, щоб відключити системи геопозиционирования.

Завжди обробляйте помилки

На жаль, не всі спроби визначити місце розташування вінчаються успіхом. Причиною може послужити неможливість підключитися до системи GPS або раптове відключення користувачем функцій визначення місця розташування. У разі помилки викликається другий, додатковий аргумент для методу getCurrentPosition (), і ви можете додати в зворотний виклик відповідне повідомлення для користувача:

window.onload = function () {var startPos; var geoSuccess = function (position) {startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude; }; var geoError = function (position) {console.log ( 'Error occurred. Error code:' + error.code); // error.code can be: // 0: unknown error // 1: permission denied // 2: position unavailable (error response from location provider) // 3: timed out}; navigator.geolocation.watchPosition (geoSuccess, geoError); };

Отримання згоди користувача на використання даних про його місцезнаходження

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

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

Результати недавніх досліджень свідчать, що користувачі не довіряють сайтам, на яких їх просять надати дані про місцезнаходження відразу при завантаженні сторінки. Так як же найкраще вчинити в таких випадках?

TL; DR

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

Завжди майте на увазі, що користувачі можуть відмовитися надавати інформацію про своє місцезнаходження

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

1. Забезпечте обробку всіх помилок поза API геолокації, щоб адаптувати ваш сайт до такої поведінки користувачів.
2. Чітко і ясно пояснюйте, для чого вам потрібна інформація про місцезнаходження.
3. При необхідності використовуйте запасний варіант рішення.

Використовуйте запасний варіант, якщо потрібні дані геолокації

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

Найчастіше такі рішення засновані на визначенні IP-адреси пристрою користувача і зіставленні цих даних з фізичними адресами, зареєстрованими в базі даних RIPE. Такі способи дозволяють визначити приблизне місце розташування користувача на основі даних про розташування найближчого до користувача вузла зв'язку або базової станції оператора стільникового зв'язку. У більшості випадків точність визначення місця розташування таким способом не гарантується, особливо у випадках, коли використовується підключення через VPN або інша проксі-служба.

Доступ до інформації про місцезнаходження завжди слід запитувати, орієнтуючись на дії користувача

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

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

Ясно давайте зрозуміти, що для виконання дії потрібні дані геолокації

У дослідженні, проведеному командою Google Ads , Користувачів просили забронювати номер в готелі в Бостоні на певному сайті бронювання. Відразу після натискання кнопки "Знайти і забронювати" на головній сторінці сайту їм було запропоновано вказати своє місце розташування на основі даних GPS.

У ряді випадків пользовали прийшли в подив, оскільки вони не могли зрозуміти, чому в результатах пошуку відображаються готелі в Сан-Франциско, коли номер потрібно забронювати в Бостоні.

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

Також можна використовувати явний заклик до дії, а саме "Find Near Me" (Знайти поблизу від мене).

Ненав'язливо натякніть користувачам, що вам необхідний доступ до даних геолокації

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

Рекомендується спонукати користувача до виконання дії, якщо вам потрібно, щоб він виконав його.

Ось що ми рекомендуємо:

1. Налаштуйте таймер, який буде спрацьовувати після короткого періоду часу (5 секунд цілком достатньо).
2. При отриманні повідомлення про помилку на екрані має відображатися відповідне повідомлення.
3. У разі позитивної відповіді таймер відключається і починається обробка отриманого результату.
4. Якщо після тайм-ауту позитивну відповідь так і не отримана, на екрані має відображатися відповідне повідомлення.

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

   button.onclick = function () {var startPos; var element = document.getElementById ( "nudge");

   var showNudgeBanner = function () {nudge.style.display = "block"; };

   var hideNudgeBanner = function () {nudge.style.display = "none"; };

   var nudgeTimeoutId = setTimeout (showNudgeBanner, 5000);

   var geoSuccess = function (position) {hideNudgeBanner (); // We have the location, do not display banner clearTimeout (nudgeTimeoutId);

   // Do magic with location startPos = position; document.getElementById ( 'startLat'). innerHTML = startPos.coords.latitude; document.getElementById ( 'startLon'). innerHTML = startPos.coords.longitude;

   }; var geoError = function (error) {switch (error.code) {case error.TIMEOUT: // The user did not accept the callout showNudgeBanner (); break; };

   navigator.geolocation.getCurrentPosition (geoSuccess, geoError); };