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

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

Синтаксис

navigator.geolocation.methodName([options])

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

Методи

getCurrentPosition()

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

toJSON()

Повертає об'єкт, що містить координати, точність, швидкість та інші параметри у форматі JSON.

Властивості

latitude

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

longitude

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

altitude

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

accuracy

Використовується для визначення точності геолокації користувача.

altitudeAccuracy

Показує точність висоти користувача над рівнем моря.

heading

Визначає напрямок руху пристрою відносно Півночі в градусах (0°-360°).

speed

Повертає швидкість руху пристрою у метрах на секунду на основі географічного положення.