Всем доброго времени суток дорогие друзья. Тема сегодня довольно интересная и поэтому давайте не будет терять нашего времени и сразу приступим к делу.

Прежде всего хочу вам сообщить что для того чтобы определить местоположение пользователя, во первых сам пользователь должен дать разрешение на данное действие, а во вторых протокол должен быть https c http такое не прокатит, это реализовано прежде всего для безопасности и конфиденциальности данных.

За работу с геолокацией отвечает объект navigator, кто работает с javaScript уже знакомы с этим объектом к примеру:

alert(navigator.userAgent);

выведет в модальном окне браузер его версию и операционную систему с которой сидит пользователь.

Следовательно за работу с геолокацией отвечает свойство geolocation и записывается так:

console.log(navigator.geolocation);

здесь нам в консоль вернется объект геолокации, развернув который вы увидите следующее:

Geolocation {}

__proto__:Geolocation

clearWatch:ƒ clearWatch()

getCurrentPosition:ƒ getCurrentPosition()

watchPosition:ƒ watchPosition()

constructor:ƒ Geolocation()

Symbol(Symbol.toStringTag):"Geolocation"

__proto__:Object

Здесь нас интересуют только getCurrentPosition, watchPosition и clearWatch ,а именно методы для работы с геолокацией.

Метод getCurrentPosition позволяет определить позицию пользователя по координатам широты и долготы, выглядит все это примерно так:

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

position.coords.latitude - координата широты(в градусах)

position.coords.longitude - координата долготы(в градусах)

как мы видим внутри метода getCurrentPosition вызывается анонимная функция которая в качестве аргумента возвращает текущую позицию пользователя, отмечу что данный метод можем принимать две функции. Первая вызывается при удачном исходе, вторая в случае возникновения ошибки. Ошибка можем возникать в случае если пользователь отказал нам в предоставлении своего местоположения. Пример:

navigator.geolocation.getCurrentPosition(success, error);

function success(position) {
    console.log('Широта: ' +
        position.coords.latitude , "Долгота: " + position.coords.longitude);
}
function error(err){
    if (err.code == 1) {
        console.log('Вы запретили определять свое местоположение');
    }
}

Что касается точности определения координат по широте и долготе ,я проверял , погрешность составила примерно 100 - 150 метров. Но я думаю это зависит прежде от устройства которое вы используете. Отмечу что данным методом вы можете определять местоположение пользователя через все современные устройства телефоны, iphone, ноутбуки и т. д.

Метод watchPosition действует по такому же принципу как и getCurrentPosition но только с одним значительным исключением он активируется как только пользователь меняет свое местоположение. То есть данные метод динамичен и мы с помощью него можем отслеживать перемещение пользователя.

navigator.geolocation.watchPosition(success, error);

function success(position) {
    console.log('Текущие координаты широты: ' +
        position.coords.latitude , "Текущие координаты долготы: " + position.coords.longitude);
}
function error(err){
    if (err.code == 1) {
        console.log('Вы запретили определять свое местоположение');
    }
}

мы можем прикрепить к данному методу дескриптор или идентификатор используя который с помощью метода clearWatch сможем прервать процесс отслеживания.

var id =  navigator.geolocation.getCurrentPosition(success, error);

 function success(position) {
     console.log('Широта: ' +
         position.coords.latitude , "Долгота: " + position.coords.longitude);
 }
 function error(err){
     if (err.code == 1) {
         console.log('Вы запретили определять свое местоположение');
     }
 }
navigator.geolocation.clearWatch(id);

Вот и все дорогие друзья что я вам хотел рассказать по данной теме. Дальше дело за вами.

Я желаю вам удачи и успехов.Пока!