Geolocation у JavaScript — координати користувача

Об'єкт Geolocation у JavaScript

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

Основний метод:

• getCurrentPosition(): запитує поточне географічне положення користувача.

Основні властивості:

• coords.latitude: широта.
• coords.longitude: довгота.
• coords.accuracy: точність визначення координат в метрах.

Приклад:

navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Широта:", position.coords.latitude);
    console.log("Довгота:", position.coords.longitude);
});

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

Відслідковування положення в реальному часі

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

Основний метод:

• watchPosition(): відслідковує зміни положення користувача в реальному часі.

Приклад:

let watchID = navigator.geolocation.watchPosition(function(position) {
    console.log("Нова широта:", position.coords.latitude);
    console.log("Нова довгота:", position.coords.longitude);
});

// Для зупинки відслідковування
navigator.geolocation.clearWatch(watchID);

Тут ми починаємо відслідковувати рухи користувача і виводимо оновлені координати. Щоб зупинити відслідковування, ми використовуємо метод clearWatch().

Обробка помилок

Коли ви працюєте з Geolocation API, можуть виникати різні помилки: користувач може відмовити в доступі, може бути проблема з отриманням даних від супутників GPS і т.д. Добре зрозуміти, як обробляти такі помилки.

Приклад:

navigator.geolocation.getCurrentPosition(
    function(position) {
        console.log("Широта:", position.coords.latitude);
        console.log("Довгота:", position.coords.longitude);
    },
    function(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                console.log("Користувач відхилив запит на геолокацію.");
                break;
            case error.POSITION_UNAVAILABLE:
                console.log("Інформація про місцезнаходження недоступна.");
                break;
            case error.TIMEOUT:
                console.log("Тайм-аут запиту до геолокаційного сервісу.");
                break;
            case error.UNKNOWN_ERROR:
                console.log("Виникла невідома помилка.");
                break;
        }
    }
);

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

правити

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

правити

Порада

Є кілька типових причин, через які може не вдатися отримати геодані. Зокрема, користувач може відмовити в доступі, або геодані можуть бути тимчасово недоступні. Використовуйте обробники помилок, щоб надати користувачеві відповідний відгук.

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

Дані, отримані через Geolocation API, можуть відрізнятися за точністю. Наприклад, дані отримані від мобільного телефону можуть бути менш точними, ніж дані отримані від пристрою з високоякісним GPS-модулем. Враховуйте coords.accuracy для оцінки точності отриманих даних.

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

navigator.geolocation.methodName([options])

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	5	3.5	5	10.6	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	≤3

Приклади

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

<div id="map">Демонстраційний елемент</div>

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

    let map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: latitude, lng: longitude},
        zoom: 15
    });

    let marker = new google.maps.Marker({
        position: {lat: latitude, lng: longitude},
        map: map,
        title: 'Ваше поточне місцезнаходження'
    });
});

// 1. Чи є API взагалі: у незахищеному контексті (http://) його може не бути
if (!('geolocation' in navigator)) {
  console.log('Geolocation тут недоступний — далі йти нема куди');
} else {
  console.log('Geolocation є, надсилаємо запит...');

  navigator.geolocation.getCurrentPosition(
    // 2. успіх — координати приходять СЮДИ, сам виклик нічого не повертає
    function (position) {
      console.log('широта:', position.coords.latitude);
      console.log('довгота:', position.coords.longitude);
      console.log('точність, м:', position.coords.accuracy);
    },
    // 3. відмова — обов'язковий колбек, без нього збій просто зникне
    function (error) {
      console.log('код помилки:', error.code, '|', error.message);
      if (error.code === 1) {
        console.log('PERMISSION_DENIED: дозволу немає — покажіть це людині, а не мовчіть');
      } else if (error.code === 2) {
        console.log('POSITION_UNAVAILABLE: джерело координат не відповіло');
      } else if (error.code === 3) {
        console.log('TIMEOUT: вийшов час очікування');
      }
    },
    // 4. без timeout запит може не завершитися ніколи
    { enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }
  );

  console.log('цей рядок виводиться ПЕРШИМ — виклик асинхронний');
}

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

    fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&lat=${latitude}&lon=${longitude}`)
    .then(response => response.json())
    .then(data => {
        alert(`Погода у вашому місцезнаходженні: ${data.current.temp_c}°C, ${data.current.condition.text}`);
    });
});

let destination = {lat: 50.4501, lon: 30.5234}; // координати Києва

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

    let distance = getDistanceFromLatLonInKm(latitude, longitude, destination.lat, destination.lon);
    alert(`Ви знаходитесь приблизно ${distance} км від Києва.`);
});

function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
    let R = 6371;
    let dLat = deg2rad(lat2-lat1);
    let dLon = deg2rad(lon2-lon1); 
    let a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    let distance = R * c;
    return distance;
}

function deg2rad(deg) {
    return deg * (Math.PI/180);
}