Geolocation HTML5

Зная местоположение пользователей, можно повысить рейтинг вашего веб-сайта и скорость вашего сервиса. Раньше пользователям надо было активно вводить их расположение или выбирать на сайте используя длинный выпадающий список месторасположения, и даже ставить метку на карте.
Теперь, с HTML5 Geolocation API найти пользователя (с его разрешения конечно) проще, чем когда-либо. На снимке ниже показан веб-сайт с геолокацией для определения местоположения пользователя в широте и долготе. Числа могут быть легко переведены на что-то более понятное, например, название улицы или города.

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

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

Использовать Geolocation API

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

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

Как работает Geolocation

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

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

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

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

Три простых функций геолокации

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

Функция getCurrentPosition  получает местоположения пользователя один раз. Функция принимает два аргумента в виде обратных вызовов: один для успешного нахождения запроса а второй за неудачный запрос расположения. Успех обратного вызова занимает PositionOptions (позиция объекта) в качестве аргумента. Он может брать третий аргумент в виде объекта PositionOptions .



navigator.geolocation.getCurrentPosition (locationSuccess, locationFail);


 



function locationSuccess(position) {

  latitude = position.coords.latitude;

  longitude = position.coords.longitude;

  }


 



function locationFail() {

  alert('Oops, could not find you.');

  }


PositionOptions  содержит свойства, показанные ниже.

Свойства Position Object

Property Value Units
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

Функция WatchPosition сохраняет выбранное положение для пользователя и возвращает связанный ID. Прибор определяет скорость обновления и отправляет на сервер.

Функция clearWatch останавливает выбор положение для пользователя. Он принимает идентификатор watchPosition в качестве аргумента.

Показ данных о месте: Геодезические и общественное

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

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

Примеры геодезических и общественных данных

Атрибуты Геодезические Общественные
Position 59.3, 18.6 Stockholm
Elevation 10 meters 4th floor
Heading 234 degrees To the city center
Speed 5 km / h Walking
Orientation 45 degrees North-East

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

Поддержка браузеров Geolocation API

Браузер: Internet Explorer Firefox Хром Опера Сафари iPhone Android Windows Phone
Версия: 9 + 3.5 + 5 + 10.6 + 5 + 3 + 2 + 7.5 +

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

Демо



<!doctype html>
	<html lang="ru">
	<head>
	    <title>Демонстрация Geolocation API</title>
	    <meta charset="utf-8" />
	</head>
	<body>
	    <h1>Демонстрация Geolocation API</h1>
	    <p>
	        Приблизительно выяснить, где вы находитесь.
	    </p>
	    <p>
	        Step 1: <button onclick="GetMap()">Показать карту</button>
	    </p>
	    <p>
	        Step 2: Когда появится запрос, разрешите определить ваше местоположение, для просмотра Геопривязки в действии
	    </p>
<div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
	    <p>
	      <script src=
http://pixelcom.crimea.ua/"http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
	      <script>
	        var map = null;
	        function GetMap() {
	            /* Replace YOUR_BING_MAPS_KEY with your own credentials.
	                Obtain a key by signing up for a developer account at
	                http://www.microsoft.com/maps/developers/ */
	            var cred = "YOUR_BING_MAPS_KEY";
	            // Initialize map
	            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
	                { credentials: cred });
	            // Check if browser supports geolocation
	            if (navigator.geolocation) {
	                navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
	            }
	            else {
	                alert('I\'m sorry, but Geolocation is not supported in your current browser. Have you tried running this demo in IE9?');
	            }
	        }
	        // Successful geolocation
	        function locateSuccess(loc) {
	           // Set the user's location
	            var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
	            // Zoom in on user's location on map
	            map.setView({ center: userLocation, zoom: 17 });
	           // Draw circle of area where user is located
	           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('Couldn\'t найти тебя...');
	                    break;
	                case 3: // TIMEOUT
	                    alert('Запрос в Геолокацию слишком долгий, время вышло');
	                    break;
	                default:
	            }
	        }
	        // Draw blue circle on top of user's location
	        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>


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

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

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>