HTML5 Геолокация

Теперь пользователю не надо вводить или выбирать из длинного списка своё месторасположение. Geolocation позволяет узнать местоположение пользователя.

Оглавление:
  1. Geolocation
  2. Функции Geolocation
  3. Показ данных
  4. Поддержка

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

Местонахождение пользователя с помощью Geolocation
Рисунок с указанием местонахождение пользователя с помощью Geolocation API

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

  1. На сайте можно перечислить общественный транспорт, автобусные остановки, метро, возле пользователем вашего сайта.
  2. Поздняя ночь? Такси или автомобили можно найти на сайтах веб-службы, даже если вы не знаете где вы находитесь.
  3. Торговые сайты могут сразу получить сумму наложенным платежом.
  4. Туристические агентства могут предоставить лучший отдых, советы для текущего местоположения в зависимости от времени года.
  5. Содержимому сайтов можно более точно определить язык и диалект поисковых запросов.
  6. Представлять средние цены на жилье в конкретном районе, удобный инструмент, если вы передвигаетесь, чтобы проверить окрестности и посетить дни открытых дверей.
  7. Сайты Кинотеатров могут подсказать какой фильм покажут в ближайшем кинотеатре.
  8. Онлайн-игры могут быть приближены к реальности для выполнения миссий игры.
  9. Новостные сайты могут быть настроены для определённого места, заголовки и погода на первой странице.
  10. Интернет-магазины могут информировать какая продукция в наличии в этих местах.
  11. Спортивным и развлекательным сайтам способствует продажа билетов для предстоящей игры или шоу неподалеку от этого места, и так далее.

Geolocation

Проще говоря, у компьютера или мобильного устройства есть несколько способов узнать свое местоположение.

GPS является наиболее точным способом определения позиции, но иногда требует дополнительного времени. A-GPS (вспомогательные GPS) использует триангуляции между мобильным телефоном. Мобильные устройства, поддерживающие Wi-Fi могут определить местоположение пользователя. Можно получить грубую информацию о местоположении стационарных компьютеров без беспроводных устройств с помощью известных IP-адресов.

Когда дело доходит до физического обмена местоположением пользователя, конфиденциальность является серьезной проблемой. В соответствии с Geolocation API, агенты пользователей не должны отправлять информацию о местоположении на веб-сайтах без письменного разрешения пользователя. Другими словами, пользователь всегда должен разрешать отправку информации о местоположении с веб-сайта. Рисунок ниже показывает типичное сообщение с запросом разрешения пользователя. Для получения дополнительной информации о обеспечении безопасности с Geolocation API, см. Безопасность и конфиденциальность соображений.

Пример запроса на разрешение пользователя
Пример запроса на разрешение пользователя
к меню ↑

Функции Geolocation

getCurrentPosition
получает местоположения пользователя один раз. И принимает два аргумента в виде обратных вызовов: успешный и неудачный запрос. Успех обратного вызова PositionOptions (позиция объекта) в качестве аргумента. Может брать и третий аргумент в виде объекта PositionOptions.
WatchPosition
сохраняет выбранное положение для пользователя и возвращает связанный ID. Прибор определяет скорость обновления и отправляет на сервер.
clearWatch
останавливает выбор положение для пользователя. Он принимает идентификатор watchPosition в качестве аргумента.
navigator.geolocation.getCurrentPosition (locationSuccess, locationFail);

function locationSuccess(position) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
}

function locationFail() {
  alert('Упс, не могу найти тебя.');
}
Свойства Position Object
Свойства Значение Единицы
coords.latitude double degrees
coords.longitude double degrees
coords.altitude double or null meters
coords.accuracy double meters
coords.altitudeAccuracy double or null meters
coords.heading double or null degrees clockwise
coords.speed double or null meters/second
timestamp DOMTimeStamp like the Date object
к меню ↑

Показ данных

Есть два способа показать данные местоположения пользователя: геодезические и общественное.

  1. Геодезические — это описание позиции непосредственно относится к широте и долготе.
  2. Общественное — это показ данных о местоположении для лучшего понимания человеком.

Геодезический и общественный имеют свои атрибуты для показа данных о месте.

Геодезические и общественные данные
Атрибуты Геодезические Общественные
Позиция 59.3, 18.6 Стокгольм
Высота 10 метров 4-й этаж
Цель 234 градуса К центру города
Скорость 5 км/ч пешком
Направление 45 северо восток

От Geolocation API вы получите геодезические данные. Представление данные о местоположении с редко полезными номерами. Но есть онлайн-сервисы, такие как Bing Maps и Yahoo GeoPlanet помогут вам перевести их в общественные.

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

Демо

<!doctype html>
    <html lang="ru">
    <head>
        <title>Демонстрация Geolocation API</title>
        <meta charset="utf-8" />
    </head>
    <body>
       <h1>Демонстрация Geolocation API</h1>
        <p>Узнать где вы находитесь <button onclick="GetMap()">Показать карту</button></p>
         <div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>

          <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
          <script>
            var map = null;
            function GetMap() {
                /* Заменить YOUR_BING_MAPS_KEY своими учетными данными.
                    Получить ключ можно подписавшись на учетную запись на
                    http://www.microsoft.com/maps/developers/ */
                var cred = "YOUR_BING_MAPS_KEY";
                // Инициализация карты
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                    { credentials: cred });
                // Проверить, браузер поддерживает геолокацию
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
                }
                else {
                    alert('Геолокация не поддерживается в вашем браузере!');
                }
            }
            // Успешно
            function locateSuccess(loc) {
               // Установить местоположение пользователя
                var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
                // Увеличить местоположение пользователя на карте
                map.setView({ center: userLocation, zoom: 17 });
               // Нарисовать круг в районе, где находится пользователь
               var locationArea = drawCircle(userLocation);
               map.entities.push(locationArea);
            }
            // Unsuccessful geolocation
            function locateFail(geoPositionError) {
                switch (geoPositionError.code) {
                    case 0: // UNKNOWN_ERROR
                        alert('Произошла неизвестная ошибка, извините');
                        break;
                    case 1: // PERMISSION_DENIED
                        alert('Не было разрешение на использование Геотаргетинга');
                        break;
                    case 2: // POSITION_UNAVAILABLE
                        alert('Не могу найти тебя...');
                        break;
                    case 3: // TIMEOUT
                        alert('Запрос Геолокации слишком долгий, время вышло');
                        break;
                    default:
                }
            }
            // синий круг на местоположении пользователя
            function drawCircle(loc) {
                var radius = 100;
                var R = 6378137;
                var lat = (loc.latitude * Math.PI) / 180;
                var lon = (loc.longitude * Math.PI) / 180;
                var d = parseFloat(radius) / R;
                var locs = new Array();
                for (x = 0; x <= 360; x++) {
                    var p = new Microsoft.Maps.Location();
                    brng = x * Math.PI / 180;
                    p.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
                    p.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
                    p.latitude = (p.latitude * 180) / Math.PI;
                    locs.push(p);
                }
                return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0, 0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
            }
          </script>

Если вы запустите код, ваше местоположение будет отображаться вместе с сообщением о неверном идентификационном номере, как показано на рисунке. Чтобы получить результат без предупреждения (рис. 8), необходимо заменить YOUR_BING_MAPS_KEY своим ключом, который генерируется при регистрации на Bing Maps.

Geolocation Демо-карта Место без действительного ключа
Geolocation без действительного ключа
Geolocation Демо-карт Место после установки действующего ключа
Geolocation после установки действующего ключа

HTML5 Geolocation API даёт нам удивительные возможности во всемирной паутине. Использование этих возможностей ограничивается только вашим воображением.

к меню ↑

Поддержка

htmlhook.ru | Скрипты для веб-приложений