JS об'єкт Geolocation

Об'єкт 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

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

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

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

Переглядач
	0.10.0	1.0

Приклади

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

<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: 'Ваше поточне місцезнаходження'
    });
});

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);
}