Как использовать функцию geolocation в HTML5

Функция геолокации HTML5 позволяет вам узнать географические координаты (широту latitude и долготу longitude) текущего местоположения посетителя вашего сайта.

Эта функция полезна для обеспечения удобного просмотра посетителям сайта. Например, вы можете показать товары или объекты, которые физически близки к местоположению пользователя.

Поиск координат посетителя

Получить информацию о местоположении посетителя сайта с помощью API геолокации HTML5 довольно просто. Он использует три метода, которые упакованы в navigator.geolocation объект — getCurrentPosition(), watchPosition() и clearWatch().

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Текущее местоположение</title>
<script>
    function showPosition() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var positionInfo = "Ваша текущая геолокация (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
                document.getElementById("result").innerHTML = positionInfo;
            });
        } else {
            alert("Извините, ваш браузер не поддерживает геолокацию HTML5.");
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Информация о местоположении будет вставлена здесь-->
    </div>
    <button type="button" onclick="showPosition();">Показать гео-позицию</button>
</body>
</html>

Веб-браузер не даст местоположение посетителя, если пользователь не дает на это явного подтверждения. Стандарт геолокации устанавливает официальное правило получения разрешения пользователя для каждого веб-сайта, для которого требуются данные о местоположении.

Работа с ошибками Geolocation

Может возникнуть ситуация, когда пользователь не хочет делиться с вами данными о своем местоположении. Если это случится, вы можете дать пользователю два разных ответа при вызове функции getCurrentLocation().

Первая функция вызывается, если попытка определения геолокации успешна, а вторая, если попытка заканчивается неудачей. Давайте посмотрим на пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Обработка ошибок геолокации</title>
<script>
    // Set up global variable
    var result;
    
    function showPosition() {
        // Элемент в который выводим результат функции
        result = document.getElementById("result");
        
        // Если геолокация доступна, пробуем получить позицию посетителя
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
            result.innerHTML = "Получение информации о местоположении...";
        } else {
            alert("Извините, ваш браузер не поддерживает геолокацию HTML5.");
        }
    };
    
    // Определяем функцию обратного вызова для успешной попытки
    function successCallback(position) {
        result.innerHTML = "Ваша текущая геолокация (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
    }
    
    // Определяем функцию обратного вызова для неудачной попытки
    function errorCallback(error) {
        if(error.code == 1) {
            result.innerHTML = "Вы решили не делиться своей позицией, но все в порядке. Мы не будем спрашивать вас снова.";
        } else if(error.code == 2) {
            result.innerHTML = "Сеть не работает или услуга определения местоположения недоступна.";
        } else if(error.code == 3) {
            result.innerHTML = "Время ожидания до получения данных о местоположении истекло.";
        } else {
            result.innerHTML = "Определение геолокации не удалось из-за неизвестной ошибки.";
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Информация о местоположении будет вставлена здесь-->
    </div>
    <button type="button" onclick="showPosition();">Показать гео-позицию</button>
</body>
</html>

Отображение местоположения на карте Google

С данными геолокации вы можете отображать местоположение пользователя на Google-картах. В следующем примере будет показано ваше текущее местоположение на карте Google на основе данных о широте и долготе, полученных с помощью функции геолокации HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Использование Google Maps</title>
<script>
    function showPosition() {
        navigator.geolocation.getCurrentPosition(showMap);
    }
    
    function showMap(position) {
        // Получаем данные о местоположении
        var latlong = position.coords.latitude + "," + position.coords.longitude;
        
        // Устанавливаем URL-адрес карты Google
        var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
        
        // Создаем и вставляем Google карту
        document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
    }
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Показать мою позицию на Google картах</button>
    <div id="embedMap">
        <!--Google карта будет встроена сюда-->
    </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Использование Google Maps</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showMap, showError);
    } else {
        alert("Извините, ваш браузер не поддерживает геолокацию HTML5.");
    }
}
 
// Определяем функцию обратного вызова для успешной попытки
function showMap(position) {
    // Получаем данные о местоположении
    lat = position.coords.latitude;
    long = position.coords.longitude;
    var latlong = new google.maps.LatLng(lat, long);
    
    var myOptions = {
        center: latlong,
        zoom: 16,
        mapTypeControl: true,
        navigationControlOptions: {
            style:google.maps.NavigationControlStyle.SMALL
        }
    }
    
    var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
    var marker = new google.maps.Marker({ position:latlong, map:map, title:"Вы находитесь здесь!" });
}
 
// Определяем функцию обратного вызова для неудачной попытки
function showError(error) {
    if(error.code == 1) {
        result.innerHTML = "Вы решили не делиться своей позицией, но все в порядке. Мы не будем спрашивать вас снова.";
    } else if(error.code == 2) {
        result.innerHTML = "Сеть не работает или услуга определения местоположения недоступна.";
    } else if(error.code == 3) {
        result.innerHTML = "Время ожидания до получения данных о местоположении истекло.";
    } else {
        result.innerHTML = "Определение геолокации не удалось из-за неизвестной ошибки.";
    }
}
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Показать мою позицию на Google-карте</button>
    <div id="embedMap" style="width: 400px; height: 300px;">
        <!--Google-карта будет встроена сюда-->
    </div>
</body>
</html>

Подробнее о Google Map API по ссылке: developers.google.com/maps/documentation/javascript/reference.

Мониторинг движения посетителей

Все примеры, которые мы использовали до сих пор, основывались на методе getCurrentPosition(). Однако у объекта геолокации есть другой метод watchPosition(), который позволяет отслеживать движение посетителя, возвращая обновленную позицию при изменении местоположения.

watchPosition() имеет те же входные параметры, что и getCurrentPosition(). Однако watchPosition() может запускать функцию несколько раз — когда она получает местоположение в первый раз, и снова, когда обнаруживает новую позицию. Давайте посмотрим, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Отслеживание гео-позиции</title>
<script>
    // Устанавливаем глобальную переменную
    var watchID;

    function showPosition() {
        if(navigator.geolocation) {
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else {
            alert("Извините, ваш браузер не поддерживает геолокацию HTML5.");
        }
    }

    function successCallback(position) {
        toggleWatchBtn.innerHTML = "Stop Watching";
        
        // Проверяем было ли изменено положение или нет, прежде чем что-либо делать
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            
            // Устанавливаем предыдущее местоположение
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;
            
            // Получаем текущее положение
            var positionInfo = "Ваша текущая геолокация (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
            
        }
        
    }

    function startWatch() {
        var result = document.getElementById("result");
        
        var toggleWatchBtn = document.getElementById("toggleWatchBtn");
        
        toggleWatchBtn.onclick = function() {
            if(watchID) {
                toggleWatchBtn.innerHTML = "Start Watching";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            } else {
                toggleWatchBtn.innerHTML = "Новое положение...";
                showPosition();
            }
        }
    }
    
    // Инициализируем всю систему выше
    window.onload = startWatch;
</script>
</head>
<body>
    <button type="button" id="toggleWatchBtn">Начать просмотр</button>
    <div id="result">
        <!--Информация о местоположении будет вставлена здесь-->
    </div>   
</body>
</html>