API геолокации W3C

Под "Геолокацией" мы понимаем использование в браузере сценариев для определения, где находится определенный пользователь.

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

Можно создать слyжбу Web для предоставления информации о ближайшей больнице или с пошаговым навигационным маршрутом. Или как насчет приложения, которое сообщает обо всех интересных событиях, происходящих в вашей области в ближайшие дни с указанием точного местоположения?

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

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

Браузер предупреждает пользователя, что приложение пытается получить доступ к данным местоположения через API геолокации, и запрашивает разрешения на получение доступа

Использовать API геолокации очень просто. Прежде всего, необходимо определить, что браузер пользователя действительно поддерживает геолокацию. Это можно сделать с помощью JavaScript, чтобы запросить браузер и проверить, что он поддерживает свойство navigator.geolocation. Для однократного определения местоположения пользователя, можно использовать функцию navigator.geolocation.getCurrentPosition(), которая, в случае успеха, вызовет выбранную функцию обратного вызова.

Можно сделать это следующим образом:

//Проверяем, что браузер поддерживает W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} else {
alert('Похоже, что Geolocation, которая требуется для этой страницы, не включена в браузере. 
Пожалуйста, воспользуйтесь браузером, который ее поддерживает.');
}

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

Затем добавляется функция для успешного определения расположения:

function successFunction(position) {
var lat = position.coords.latitude;
var mylong = position.coords.longitude;
alert('Ваша широта:'+lat+' и долгота '+mylong);
}

Можно написать функцию обработки ошибки любым образом. Обратитесь к интерфейсу PositionError в спецификации за дополнительной информацией о кодах ошибки. Для примера мы сохраним ее простой:

function errorFunction(position) {
alert('Error!');
}


Если вы хотите продолжать наблюдение за местоположением пользователя и обновлять соответственно функцию, можно использовать функцию navigator.geolocation.watchPosition(). Она получает такие же параметры и работает почти таким же образом как и getCurrentPosition(). В обеих функциях getCurrentPosisition() и watchPosition() необходим только первый параметр. Второй параметр, который обрабатывает ошибку, является необязательным. Кроме того, существует третий необязательный параметр — объект, содержащий атрибуты, определяющие:

Возможность определить местоположение пользователя является очень полезным свойством. Однако с помощью API вы получаете широту и долготу. Как определить чему соответствует на Земле пара широта/долгота? Здесь на помощь приходит обратное геокодирование.

Обратное геокодирование является процессом поиска, чему в точности соответствует пара широта/долгота. Например, для пары широта/долгота (38.898748, -77.037684) обратное геокодирование сообщает, что это соответствует Белому Дому в Вашингтоне, D.C.

Существует несколько способов выполнения обратного геокодирования, и все они требуют использования некоторой внешней службы или чего-то еще. Для этого можно использовать API GeoNames.org, а также API WikiMapia или множество данных, называемое Nominatim, поддерживаемое добровольцами. Google Maps также предоставляет способ обратного геокодирования пары широта/долгота в реальные адреса для отображения на карте.

Другие API, где можно использовать пару широта/долгота включают API Flickr, который содержит методы для извлечения фотографий, сделанных в определенных координатах, API Meetup.com, и другие.

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

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Затем мы включаем логику для определения местоположения и отображения карты, центрированной по местоположению:

<script type="text/javascript">
// Determine support for Geolocation
if (navigator.geolocation) {
// Locate position
navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
alert('Похоже, что Geolocation, которая требуется для этой страницы, не включена в браузере.
Пожалуйста, используйте браузер, который ее поддерживает.');
}

// Функция обратного вызова в случае успеха
function displayPosition(pos) {
var mylat = pos.coords.latitude;
var mylong = pos.coords.longitude;
var thediv = document.getElementById('locationinfo');
thediv.innerHTML = '<p>Your longitude is :' +
mylong + ' and your latitide is ' + mylat + '</p>';

//Загружаем Google Map
var latlng = new google.maps.LatLng(mylat, mylong);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//Добавляем маркер
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here"
});
}

// Функция обратного вызова в случае ошибки
function errorFunction(pos) {
alert('Error!');
}
</script>

Наконец, код HTML и CSS для отображения данных имеет следующий вид:

<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
#map_canvas {
height: 85%;
width: 100%;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="locationinfo"></div>
</body>

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

--

Тест

Сколько потоков Web Workers может содержаться в одном JavaScript-файле?
(Отметьте один правильный вариант ответа.)
Вариант 1 два потока
Вариант 2 один поток
Вариант 3 три потока

К чему не может получить доступ Web Workers?
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 свойства страницы породившей Web Workers
Вариант 2 объектная модель документа (DOM)
Вариант 3 объект Navigator

Какое событие использует Web Workers для получения сообщения из главного потока и выполнения какой-то работы?
(Отметьте один правильный вариант ответа.)
Вариант 1 onmessage
Вариант 2 onchange
Вариант 3 onmail

С помощью какого свойства работник Web Workers может получить доступ к переменной из главного потока?
(Отметьте один правильный вариант ответа.)
Вариант 1 event.data
Вариант 2 event.stream
Вариант 3 event.message

Какие способы проверки работы Web Workers в браузерах являются некорректными?
(Отметьте один правильный вариант ответа.)
Вариант 1 if (window.Workers) { … }
Вариант 2 if (!!window.Worker) { … }
Вариант 3 if (window.Worker) { … }

По технологии геолокации местоположение пользователя определяется на основе:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 данных о точках доступа WiFi
Вариант 2 паспортных данных пользователя
Вариант 3 IP-адресе пользователя

Как проверить поддержку геолокации в браузере пользователя?
(Отметьте один правильный вариант ответа.)
Вариант 1 if (navigator.geolocation) { … }
Вариант 2 if (navigator.geoposition) { … }
Вариант 3 if (!geolocation) { … }

Сколько обязательных параметров имеет функция navigator.geolocation.getCurrentPosition()?
(Отметьте один правильный вариант ответа.)
Вариант 1 три
Вариант 2 один
Вариант 3 два

Как корректно определить местоположение пользователя с помощью функции navigator.geolocation.watchPosition?
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 if (navigator.geolocation) { navigator.geolocation.watchPosition(successFunction); }
Вариант 2 if (navigator.geolocation) { navigator.geolocation.watchPosition(); }
Вариант 3 if (navigator.geolocation) { navigator.geolocation.watchPosition(successFunction, errorFunction); }

Какие необязательные параметры может обрабатывать функция определения географического положения navigator.geolocation.watchPosition();
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 время задержки между определением местоположения и вызовом функции обратного вызова
Вариант 2 параметр более высокой точности
Вариант 3 параметр определения времени на компьютере пользователя во время геолокации
Вариант 4 максимальное время, в течение которого приложение может кэшировать информацию о местоположении до следующего вызова функции getCurrentPosition()

Какое свойство API геолокации определяет географическую широту местоположения пользователя?
(Отметьте один правильный вариант ответа.)
Вариант 1 position.coords.latlng
Вариант 2 position.coords.latitude
Вариант 3 position.coords.longitude

Какой код ошибки вернет функция геокодирования, если документ не имеет разрешения на использования API геокодирования?
(Отметьте один правильный вариант ответа.)
Вариант 1 PERMISSION_DENIED = 1;
Вариант 2 TIMEOUT = 3;
Вариант 3 POSITION_UNAVAILABLE = 2;

С помощью какого обработчика событий объект WebSocket может определить, что соединение было закрыто?
(Отметьте один правильный вариант ответа.)
Вариант 1 onclose
Вариант 2 onerror
Вариант 3 onabort

Какой формат титров поддерживается элементом <track>?
(Отметьте один правильный вариант ответа.)
Вариант 1 ASS
Вариант 2 SSA
Вариант 3 WebSRT

Какие из данных команд позволяют запустить Web Workers?
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 var info = 'Web Workers’; worker.postMessage(info);
Вариант 2 worker.postMessage();
Вариант 3 worker.putMessage();

Какой обработчик событий нужно использовать, чтобы определить окончание загрузки кэша приложений?
(Отметьте один правильный вариант ответа.)
Вариант 1 onloading
Вариант 2 ondownloading
Вариант 3 oncached

С помощью каких элементов HTML5 можно разместить на странице иллюстрацию с подписью?
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 <figure>
Вариант 2 <title>
Вариант 3 <figcaption>
Вариант 4 <img>

Какой атрибут тега video задает URL видеофайла?
(Отметьте один правильный вариант ответа.)
Вариант 1 poster
Вариант 2 controls
Вариант 3 src

Свойство strokeStyle позволяет:
(Отметьте один правильный вариант ответа.)
Вариант 1 задать цвет для штрихов изображения
Вариант 2 задать цвет для изображения заполненных фигур
Вариант 3 рисовать заполненные прямоугольники

Какой из новых атрибутов тега <input> делает его пользовательским элементом управления медиа HTML5?
(Отметьте один правильный вариант ответа.)
Вариант 1 aria-controls
Вариант 2 required
Вариант 3 placeholder

Какие из приведенных ниже директив описания типа документа будут корректными для документа на языке HTML5?
(Отметьте один правильный вариант ответа.)
Вариант 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Вариант 2 <!DOCTYPE html>
Вариант 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">

Использование сокетов HTML5 позволяет:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 уменьшить количество трафика при общении клиентского приложения с сервером
Вариант 2 снизить трудозатраты программистов при проектировании приложений
Вариант 3 сократить задержку по времени при обращении к серверу

Процесс определения соответствия географических координат широты и долготы почтовому адресу называется:
(Отметьте один правильный вариант ответа.)
Вариант 1 региональным геокодированием
Вариант 2 прямым геокодированием
Вариант 3 обратным геокодированием

Какой метод позволяет завершить рисование фигуры, задаваемой с помощью пути:
(Отметьте один правильный вариант ответа.)
Вариант 1 endPath()
Вариант 2 stopPath()
Вариант 3 closePath()
Теги: