HTML5 geolocation. Определение местоположения в html5


Содержание материала:

Геолокация — определение местоположения

Забегая вперед, для нежелающих вникать в детали, готовый пример использования Geolocation API:

Geolocation API основывается на новом свойстве глобального объекта navigator — navigator.geolocation:

Указание атрибутов в третьем параметре — дело добровольное:

  • enableHighAccuracy. Значение true указывает браузеру попытаться получить как можно более точное значение данных о местоположении посетителя страницы сайта (широты, долготы и высоты); при этом, однако, процесс получения данных может потребовать больше времени, а энергопотребление компьютера может возрасти. Значение false этого параметра затребует у браузера обычные данные о местоположении, которые могут оказаться не очень точными. Значение по умолчанию — false.
  • timeout — задаёт таймаут, в течении которого должны быть получены данные о местоположении, в виде целого числа в миллисекундах. Если указать значение 0 или отрицательное значение, система должна сразу же выдать данные о местоположении; в противном случае возникнет ошибка. Если указать значение Infinity (математическая «плюс бесконечность»), на получение данных о местоположении будет отведено столько времени, сколько потребуется. Значение по умолчанию — Infinity.
  • maximumAge — задаёт таймаут, в течение которого полученные сведения о местоположении будут кэшироваться системой (таймаут кэширования). То есть, если мы запросим сведения о местоположении, а потом, пока таймаут кэширования ещё не истёк, сделаем это ещё раз, система вернёт нам кэшированные сведения. Кэширование данных о местоположении позволяет сэкономить энергию батарей в портативных компьютерах.
    Значение этого таймаута указывается в виде целого числа в миллисекундах. Если указать значение 0 или отрицательное значение, система вообще не будет кэшировать данные о местоположении, а станет при каждом запросе получать их заново. Если же указать значение Infinity, данные о местоположении будут храниться в кэше всегда, и именно они будут возвращаться при запросе (например,вам нужно знать только город пользователя). Значение по умолчанию — 0 (то есть кэширование отключено).

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

Вызываемая функция получает один параметр — объект с двумя свойствами: coords и timestamp. Timestamp — это дата и время, при которых было произведено определение месторасположения. Определение этих свойств происходит асинхронно. Нельзя заранее предугадать когда точно это произойдет. Для пользователя это может означать некоторую задержку, потому что нужно сначала прочитать панель и убедится, что пользователь дал разрешение на определение координат, затем может потребоваться время на подключение GPS устройства к спутнику и так далее. Объект coords имеет свойства latitude (широта) и longitude (долгота) — это и есть информация о физическом положении на земном шаре. Свойства объекта приведены ниже:

Свойство Тип Примечание
coords.latitude double десятичные градусы
coords.longitude double десятичные градусы
coords.altitude double или null метров над референц-эллипсоидом
coords.accuracy double метры
coords.altitudeAccuracy double или null метры
coords.heading double или null градус по часовой стрелке относительно Северного полюса
coords.speed double или null метры/сек
timestamp DOMTimeStamp такой же как объект Date()

Гарантировано будут присутствовать только три свойства: coords.latitude, coords.longitude и coords.accuracy. Работоспособность остальных зависит от используемого пользователем устройства. Если данное свойство не поддерживается — вернется 0. Свойства heading и speed вычисляются на основании изменения положения пользователя, если, конечно, это возможно.

Второй аргумент для функции getCurrentPosition() для вызова обработчика ошибок:

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

Свойство Тип Примечания
code short пронумерованные значения
message DOMString не предназначен для конечных пользователей

Свойство code принимает одно из следующих значений:

  • PERMISSION_DENIED (1) — когда пользователь не разрешает определение месторасположения;
  • POSITION_UNAVAILABLE (2) — если перебои с сетью или нет связи со спутником;
  • TIMEOUT (3) — если сеть работает плохо и на вычисление координат пользователя уходит слишком много времени. Что значит «слишком много»? Об этом расскажу позже;
  • UNKNOWN_ERROR (0) — какая-либо другая ошибка.

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

Объект PositionOptions

Свойство Тип Значение по умолчанию Замечание
enableHighAccuracy boolean false Если true, то медленнее
timeout long Нет В миллисекундах
maximumAge long В миллисекундах

Свойство enableHighAccuracy делает именно то, как и звучит. Если оно установлено как true, устройство поддерживает свойство и пользователь соглашается указать свое местоположение, то устройство попытается обеспечить высокую точность. Оба телефона iPhone и Android имеют отдельные разрешения для низкой и высокой точности позиционирования, поэтому не исключено, что вызов getCurrentPosition() с enableHighAccuracy:true не получится, а вызов enableHighAccuracy:false удастся.

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

Свойство maximumAge позволяет устройству отвечать немедленно из закэшированной позиции. Например, вы обращаетесь к getCurrentPosition() в первый раз, пользователь соглашается, и ваша функция успешно возвращает положение вычисленное ровно в 10:00. Ровно через минуту, в 10:01 вы вызываете getCurrentPosition() снова установив свойство maximumAge в 75000.

Вы тем самым говорите, что вам необязательно знать текущее положение пользователя. Вы были бы рады знать, где он был 75 секунд назад (75000 миллисекунд). Устройство знает, где пользователь был 60 секунд назад (60000 миллисекунд), так как оно рассчитало место после первого вызова getCurrentPosition(). Поэтому устройство не будет пересчитывать текущее местоположение пользователя. Оно вернет ту же информацию, что и в первый раз: ту же широту и долготу, ту же точность и то же время (10:00).

Прежде чем вы запросите местоположение пользователя, вы должны подумать о том, какая точность вам требуется, и установить соответствующее enableHighAccuracy. Если вам необходимо найти место еще раз, вы должны подумать о том, какая старая информация может пригодиться и установить соответствующее maximumAge. Если требуется искать локацию постоянно, то getCurrentPosition() не для вас, необходимо перейти на watchPosition().

Фукнция watchPosition() имеет ту же структуру что и getCurrentPosition(). Она содержит две функции, одна требуется для успеха, вторая для ошибок, также может иметь необязательный объект PositionOptions, он имеет те же свойства, о которых вы узнали ранее. Разница в том, что ваша функция будет вызываться каждый раз при смене местоположения пользователя. Нет необходимости постоянного опроса позиции, устройство само определит оптимальный интервал опроса и вызовет функцию при изменении положения пользователя. Вы можете использовать эту возможность для обновления видимым маркеров на карте, предоставления инструкции, куда идти дальше или чего-нибудь еще. Это полностью зависит от вас.

Сама функция watchPosition() возвращает число, которое следует где-то хранить. Если вы хотите остановить слежение за положением пользователя, то можете вызвать метод clearWatch(), передать ему это число и устройство остановит вызов функции. Если вы когда-либо использовали функции setInterval() и clearInterval() в JavaScript, то это работает точно так же.

4. «Подписка» на получение сведений о местоположении

А ещё Geolocation API позволяет «подписаться» на постоянное получение сведений о местоположении. Это может пригодиться при разработке навигационных веб-приложений, предназначенных для мобильных устройств; в результате такое приложение сможет постоянно отслеживать изменение местоположения устройства.

Чтобы выполнить «подписку» на постоянное получение данных о местоположении, следует воспользоваться методом watchPosition объекта Geolocation. Формат его вызова таков:

Этот метод принимает те же параметры, что и знакомый нам по параграфу 3 метод getCurrentPosition.

Метод watchPosition возвращает особую целочисленную величину, называемую идентификатором «подписки». Этот идентификатор следует сохранить в какой-либо переменной; впоследствии мы можем использовать его для отмены «подписки» на получение данных о местоположении. Впрочем, если мы не собираемся отменять «подписку», идентификатор, возвращённый методом watchPosition, можно и проигнорировать.

При первом вызове метода watchPosition сразу же запустится операция по получению текущего местоположения. Если она увенчается успехом, будет вызвана функция, переданная данному методу первым параметром, в противном случае — функция, переданная вторым параметром. Как видим, всё то же самое, что и в случае метода getCurrentPosition.

В дальнейшем, пока действует «подписка», система будет время от времени проверять, изменилось ли местоположение компьютера или мобильного устройства. (Интервал проверки зависит от характеристик аппаратной части компьютера или устройства и системных настроек). Если во время очередной проверки удалось получить местоположение, и это местоположение отлично от того, что было получено ранее, снова будет вызвана функция, переданная первым параметром методу watchPosition. Если же во время проверки возникла ошибка, будет вызвана функция, переданная этому методу вторым параметром.

Выполненную ранее «подписку» на получение информации о местоположении можно отменить. Для этого применяется метод clearWatch объекта Geolocation. В качестве единственного параметра он принимает идентификатор «подписки», которую нужно отменить. Результата он не возвращает.

Определение местоположения пользователя через JavaScript

Большинство современных устройств позволяют определить своё местоположение через GPS, WiFi, или геопозицию по IP. Разработчики могут использовать эту информацию для предоставления поисковых результатов, отображения ближайших магазинов и других удобностей, связанных с картами.

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

Источники местоположения

JavaScript позволяет реализовать поставленную задачу посредством использования Geolocation API. В вашем распоряжении будет небольшой набор функций с помощью которых возможно определение позиции устройства по:

  • GPS – для мобильных устройств, наиболее точный метод (погрешность в пределе 10 метров).
  • WiFi – доступен для всех подключённых устройств. Довольно точен.
  • Геолокация по IP – привязана к региону. Часто даёт большую погрешность, в зависимости от расположения оборудования провайдера.

При запросе данных, браузер попытается извлечь информацию всеми тремя способами. Позиция по WiFi определяется быстрее по сравнению с GPS и наиболее точна по сравнению с геолокацией по IP.

Работа с Geolocation API

Geolocation API довольно-таки неплохо поддерживается браузерами, но всё равно было бы неплохо проверить доступность объекта Window.navigator.

В объекте navigator.geolocation доступны следующие методы:

  • Geolocation.getCurrentPosition() – Определение текущей позиции устройства.
  • Geolocation.watchPosition() – Отслеживание изменения позиции устройства и вызов функции обратного вызова.
  • Geolocation.clearWatch() – Удаление обработчика метода watchPosition.

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

Запрос на доступ к позиции

Поскольку Geolocation API использует персональную информацию, то перед тем как использовать данный инструмент нужно запросить у пользователя разрешение.

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

Безопасные хосты


Ещё одним препятствием к использованию данного API является обязательная поддержка HTTPS. Согласно новым правилам безопасности, Google Chrome не позволит ненадёжным хостам запускать Geolocation API. Так что вам придётся установить SSL сертификат на ваш домен.

Подробнее об этом можно найти тут.

Небольшой пример: извлекаем и отображаем на карте местоположение устройства пользователя.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tutorialzine.com/2020/06/quick-tip-detecting-your-location-with-javascript/
Перевел: Станислав Протасевич
Урок создан: 26 Июня 2020
Просмотров: 61454
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Live-code.ru :: Блог программиста

Живой код — создать и раскрутить сайт

Рубрики

Самое читаемое

  • Как раскрутить форум 57
  • О сайте 24
  • Выбираем лучший форум для сайтов Joomla 20
  • Проверенные способы защиты PHP 15
  • Профессиональный хостинг по доступным ценам 15

Полезные ресурсы

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

Напишу скрипт бесплатно

Сортировка массивов по возрастанию и убыванию в PHP

Звезды блога ТОП 3

  • Введение в Ajax 10
  • Финансовый стриптиз за февраль 2012 10
  • Делаем скриншот сайта — PHP Скрипт 10

Определяем местоположение посетителей используя HTML5 Geolocation API

Геолокация представляет способ определить местоположение и поделиться этой информацией с доверенными сайтами. Это можно сделать несколькими способами, с помощью GPS, встроенного в ваш новый смартфон или подключенного к компьютеру, что является более точным методом. Для пользователей без GPS, браузер будет использовать IP-адрес, или попытается найти ближайшую беспроводную точку доступа, что не так точно, но даст представление о том где они находятся.

Хотя геолокация действительно сложная, вам будет легко реализовать эту функцию. В этой статье я расскажу вам, как определить местоположение пользователя и отобразить на карте с помощью Google Maps.

1 Создание HTML страницы

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

В страницу также включен Google Maps Api, важно в URL установить параметр sensor=false, иначе Google попытается вычислить местоположение пользователя.

Функция инициализации, которую мы вызовем, попытается вернуть месторасположение при загрузке.

2 Получение местоположения

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

Сначала проверим, действительно ли браузер поддерживает

геолокацию. Браузеры, которые поддерживают геолокацию: Internet Explorer 9, Firefox 3.5 +, Chrome5 +, Opera 10.6 + и Safari 5 +. Тут вы сможете скачать firefox последнюю версию. Так что она уже довольно широко поддерживается, но если у пользователя старый браузер, мы показываем ему сообщение о том, что геолокация не поддерживается.

Затем мы устанавливаем статус сообщения в «Checking . «, чтобы сообщить пользователю, что мы пытаемся получить данные о местоположении, так как это может занять некоторое время. Потом мы вызываем функцию navigator.geolocation.getCurrentPosition, которая попытается получить расположение пользователя, и в случае успеха вызовет функцию OnSuccess, или OnError в противном случае. В следующие два шага мы создадим эти функции.

В функции getCurrentPosition есть дополнительные параметры. Это enableHighAccuracy, который сообщает браузеру попробовать использовать GPS пользователя, если возможно, false является значением по умолчанию. Параметр timeout сообщает браузеру, как долго мы готовы ждать, чтобы получить местоположение в миллисекундах, значение по умолчанию бесконечно. И наконец параметр maximumAge — это время хранения данных местоположения в кэше в миллисекундах, значением по умолчанию для maximumAge является 0, что полностью отключает кэш.

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


3 Функция OnSuccess

Далее добавим функцию OnSuccess в наш раздел сценариев. Эта функция отобразит полученные данные, и вызовет loadMap для загрузки карты.

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

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

4 Функция OnError

Поскольку геолокация является довольно сложной, многое может пойти не так, нам нужен обработчик ошибок. В функции четыре различных кода ошибок, 0 — неопределенная ошибка, ошибка с кодом 1 возникнет если браузер отвергнет получение местоположения, код 2, если браузеру не удается получить местоположение и 3, если значение переменной timeout слишком короткое, и тайм-аут истек.

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

5 Отображение карты

И наконец мы отображаем карту в блоке map_canvas.

Если вы хотите узнать больше о Google Maps API, то можете перейти по ссылке.

Internal Server Error

Error 500

This could be due to one of the following reasons:

.htaccess file was misconfigured

Permissions for the file requested on site were misconfigured

PHP or CGI code was misconfigured in the file that is requested on site

Site resources are approaching their maximum limits

Please contact the server administrator webmaster@coderlessons.com and provide the following information:

The time the error occurred

The actions you took prior to and immediately following the error. This will help the administrator better understand what may have caused the error. Please refer to the server error log for more information.

Как узнать регион пользователя с помощью Geolocation HTML5

Как узнать регион пользователя который зашёл на сайт?

3 ответа 3

Что-то подобное можно использовать (определение местоположения по координатам):

HTML

JS

Рабочий пример: https://jsfiddle.net/tty37u7m/6/ (сюда в код не удалось импортировать этот пример, geolocation не реагирует)

Пока существуют NAT и «серые» сети, про геолокацию можно забыть.

Дело в том, что из-за недостатка публичных («белых», всюду видимых) IPv4 адресов интернет-провайдер назначает их только некоторому количеству своих устройств, так называемым «NAT-шлюзам». Абонентам же, ровно как и внутренним маршрутизаторам, назначаются локальные («серые») адреса, невидимые за пределами шлюза; эти адреса повторяются от провайдера к провайдеру.

База же GeoIP, хранящая в себе географическую привязку подсетей, содержит в себе исключительно публичные подсети. Как результат, geolocation определяет положение не пользователя, а провайдерского шлюза во «внешний» интернет. С учётом того, что шлюзов как правило несколько, то каждое последующее подключение может быть «проброшено» через разные, вероятно географически распределённые, шлюзы.

Например: я живу в Тольятти, но geolocation определяет, что я живу то в Самаре, то в Москве.

Определить текущее местоположение через Google Maps API + HTML 5 Geolocation

Недавно, при разработке очередного WP плагина мне пришлось написать код для локального поиска на Google Map, исходя из текущего адреса/местоположения. Для решения этой задачи я использовал HTML 5 Geolocation и Google Maps Geocoding API. Итоговый результат получился довольно интересным, поэтому я решил поделиться им в этом посте…

Сразу оговорюсь, что мое решение не является 100% верным и вообще писалось за несколько часов в второпях и на коленке. Поэтому, если вы видите более рациональное/правильное решение – предлагайте в комментариях, буду очень признателен.

С чего все началось?

Вообще, изначально я разрабатывал на PhoneGap приложение для знакомств, и там очень бы пригодилась такая «фича», как определение местоположения, но к сожалению руки не дошли и поэтому все равно вернулся к этому, но только уже при разработке WP плагина. Естественно, код из плагина я перенес в приложение, поэтому он получился вдобавок еще и универсальным в применении. Далее, я по шагам попытаюсь объяснить, что и где используется в коде. Для упрощения я не брал 100% свой код 1:1, а самые важные места помечал console.log(); выводом в консоль.

HTML5 Geolocation

Как ни странно, но текущее положение пользователя (широту и долготу) можно получить используя этот API. Подробнее о нем вы можете прочитать тут. Ниже код, который все реализует:

Добавление на сайты возможности определения местоположения пользователя при помощи HTML5 Geolocation

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

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

Опыт пользователя занял одно из главным мест в области веб-дизайна в последние десять лет. Нас как пользователей постоянно просят предоставить обновленную информацию о себе. Все: от Твиттера, спрашивающего «Что происходит?», до Фейсбук, интересующегося, что нам «нравится». Все это позволяет этим компаниям, помимо прочего, составить ваш довольно подробный и точный профиль, благодаря чему они могут предоставить вам более персонализированный опыт пользователя.

Примерно в то же время, когда было объявлено о выходе HTML5, другой API был представлен нам W3C. Я вполне уверен, что вы, должно быть, слышали о нем – API Geolocation. За счет него на вашем сайте появляется возможность получать информацию о географическом местоположении при помощи JavaScript.

Как работает геолокация?

Данные о местоположении могут быть получены при помощи множества различных источников. Обычно на веб-сайтах они определялись бы исходя из IP-адреса посетителя. Далее на его основании при помощи сервиса WHOIS (* сокр. от who is who; сетевая интернет-программа, которая позволяет абонентам обращаться с запросами к хранимой в DDN NIC базе данных о пользователях сети, доменах, доступных сетях и прочих объектах. Здесь и далее примеч. пер.) был бы получен адрес физического местоположения посетителя за счет информации whois (* адрес, электронный адрес, номер телефона, контакты и т.д.). Однако с недавних пор стал общепринятым более популярный и точный способ получения этой информации – за счет использования встроенного GPS-чипа (* GPS – спутниковая система позиционирования, позволяющая с помощью специального приёмника осуществить быстрое автоматическое определение координат в любой точке мира (точность колеблется от 1 до 100 м) и скорости перемещения различных объектов на поверхности Земли и в воздушном пространстве). Такие чипы имеются в большинстве смартфонов и планшетов и являются причиной роста популярности сервисов с возможностью определения местоположения пользователя, которыми мы могли бы воспользоваться. Вспомните Foursquare (* мобильное приложение, предоставляющее информацию о местах, расположенных недалеко от текущего местоположения пользователей и рекомендуемых им для посещения на основании ранее полученной о них информации) или любое другое приложение, при помощи которого вы могли бы отметиться в различных заведениях.

Защита персональной информации пользователей сайта

В спецификации API Geolocation, выпущенной W3C, указано:

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

Перед тем как устройство или браузер смогут получить данные о местоположении посетителя, он должен для начала дать на это разрешение. Ниже показано, как это выглядит в Google Chrome:

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


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

Варианты использования возможности определения географического местоположения Интернет-пользователя

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

Геомаркетинг

Геомаркетинг – относительно новый термин, определение которого может быть сформулировано следующим образом:

Использование географических данных в различных аспектах маркетинга, включая продажу и распространение товаров.

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

Краудсорсинг

(* краудсорсинг – по аналогии с аутсорсингом (outsourcing) — привлечение работников-добровольцев, часто неквалифицированных Интернет-пользователей, например для наполнения сайта тем или иным контентом; расходы на содержание таких нештатных сотрудников минимальны). Не только маркетологи могут извлечь пользу из сервисов с возможностью определения местоположения, но и представители творческой деятельности также выгадали от их использования (вероятно, даже не подозревая об этом). Люди воспользовались ими для получения доступа к большой аудитории людей, все члены которой располагаются на той же самой территории и объединены одной целью «что-то сделать». Это могут быть как флеш-мобы (* краткая массовая акция, как правило, не имеющая определённой цели и организованная с помощью интернета или мобильной связи: люди собираются в условленном месте, выполняют определённые, заранее оговорённые, действия и быстро расходятся), так и крупномасштабные танцевальные номера, так и создание групп активистов для людей с общими интересами.

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

Предложения

Недавно стало появляться повсюду большое количество «сайтов с предложениями». Одним из наиболее ярких их представителей является Groupon (* крупнейший в мире сайт коллективных покупок), запущенный в ноябре 2008 года. Groupon предлагает своим пользователям сервисы быстрой продажи (* от англ. deal-of-the-day ( daily deal, или flash sales, или one deal a day); ежедневная сделка) и каждый день на сайте предлагается заранее установленное количество скидок для каждого предложения. Необходимо, чтобы для каждого предложения набралось достаточно заинтересованных лиц; в этом случае они получают его, но только если достигается предопределенное количество людей.

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

Практические примеры

Теперь, когда вы знаете немного больше об определении местоположения, давайте взглянем на некоторые примеры из реального мира разработки.

The Rocky Horror Show

Этот веб-сайт позволяет вам узнать время показа шоу в близко расположенных к вам местах. Просто перейдите на сайт и нажмите «Find my location».

Проект Places Flickr

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

Mapumental

Mapumanetal появился примерно в 2006 году, когда Министерство транспорта Соединенного Королевства (Великобритании и Северной Ирландии) связалось со стартапом для разработки сервиса, использующего имеющуюся у него информацию насчет общественного транспорта. Они описали то, чем занимаются в Mapumental, как «Мы создаем карты, которые помогают людям принимать лучшие решения и быстрее». Этот сайт предлагает множество инструментов и сервисов, которые предоставляют способы визуализации данных о поездках в режиме реального времени.

Реализация возможности определения местоположения пользователя

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

HTML-разметка

Я ее создал таким образом, чтобы вы могли довольно просто добавить ее на ваш веб-сайт. Цель состоит в том, чтобы у пользователя была возможность нажать кнопку, при помощи чего будут получены и отображены на сайте данные о его местоположении за счет небольшой помощи со стороны API Google Maps.

Мы начинаем с элемента-обертки для выравнивания нашего дизайна по центру. Я задал для него в качестве значения ширины 960px, однако вы можете установить любой необходимый для вашего дизайна размер. В обертке я добавил div, который является местом, где будет располагаться карта сразу после создания. Я задал для него в качестве ID ‘map’.

В div с ID ‘map’ я затем поместил элемент span, для которого добавил класс под названием ‘helper’. Он будет выступать в роли небольшой подсказки, информирующей пользователей о том, что им необходимо выполнить. Может показаться, что это излишне, однако согласно установившейся практике всегда следует по возможности помогать пользователям.

Далее идет изображение предварительного загрузчика, для которого я добавил ID ‘preloader’. Если вы подыскиваете предварительные загрузчики, то вы можете посетить preloaders.net.

Ниже показано, что у вас должно быть на данный момент:

После div с ID ‘map’ я добавил простой якорный элемент, который будет выступать в роли кнопки, которую сможет нажать пользователь. В качестве класса для него задано (да, верно) ‘button’.

Сразу после нажатия кнопки нам не только нужно, чтобы была отображена карта, но также могло бы быть полезным отобразить местоположение пользователя, географическую долготу и широту. Для этого я создал div с ID ‘results’, который в свою очередь содержит три строчных элемента, каждый из которых имеет соответствующий класс. На этом все с разметкой. Ниже показано, как должен выглядеть весь код разметки:

Код CSS

В CSS-коде все довольно ясно. Он представлен полностью ниже:

Следует обратить внимание на то, что предварительный загрузчик – единственный элемент div, для которого установлено абсолютное позиционирование. Абсолютное позиционирование по отношению к div с ID ‘map’. Для этого нужно всего лишь убедиться, что у div с ID ‘map’ в качестве значения position задано relative. За счет этого будет возможным задать для предварительного загрузчика позиционирование относительно его родительского элемента, а не целого документа.

jQuery

Google предоставляет набор API для своих сервисов для работы с картами, пользоваться которыми можно бесплатно, пока не будут достигнуты определенные ограничения использования. После этого будет взиматься плата.

К счастью, оба сервиса, которые мы будем использовать, полностью бесплатны; в действительности при использовании одного из приемов вообще не используется API, а используется обычный iframe (* является дочерним контекстом для браузера, за счет которого в текущую страницу встраивается другая страница-HTML) для встраивания карты, в котором мы изменим некоторые значения на те, что получаем из браузера пользователя.

Для начала давайте определим в каких-то тегах

Урок 13. HTML5 geolocation. Определение местоположения в HTML 5

Дата публикации: 15-07-2020

От автора: в html5 есть еще одна новая возможность, которая позволяет определить текущее местоположение пользователя. Наиболее точно определяется позиция для пользователей мобильных устройств, в которых есть GPS. И поскольку количество посетителей сайтов с мобильных устройств становится все больше и больше, данную возможность можно использовать на некоторых сайтах, на странице контактов. В данном уроке мы с вами познакомимся с геолокацией в html5, рассмотрим html5 geolocation пример, в котором определим свое текущее местоположение.

По итогам данного урока вы узнаете, как используя html5 geolocation определить местоположения посетителя сайта.

Geolocation HTML5

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

Рисунок с указанием местонахождение пользователя с помощью 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 .

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 и нарисовать синий круг вокруг вашего текущего местоположения. Если нет времени кодировать, смотрите демонстрацию.

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

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

Заключение

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

Использование геолокации

На этой странице

API геолокации позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.

Объект геолокации

API геолокации публикуется через объект navigator.geolocation .

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

Примечание: В Firefox 24 и более ранних версиях, «geolocation» in navigator всегда возвращало true, даже если API был отключен. Это было исправлено в Firefox 25 согласно спецификации. (баг 884921).

Получение текущего местоположения

Чтобы получить текущее местоположение пользователя, вы должны вызвать метод getCurrentPosition() . Это инициирует асихронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр — объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.

Примечание: По умолчанию, getCurrentPosition() пытается ответить как можно быстрее, используя при этом низкую точность. Это полезно, если вам нужен быстрый ответ и не важна точность. Устройства с GPS, например, могут потребовать минуту и даже больше, чтобы исправить данные GPS, поэтому сначала могут быть возвращены менее точные данные (месторасположение IP или wifi) getCurrentPosition() .

В приведенном выше примере вызывается функция the do_something() , как только получены данные о локации.

Наблюдение за текущим местоположением

Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции watchPosition() , которая имеет несколько входных параметров: getCurrentPosition() . Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приемов). Функция, которая вызывается при ошибке, для getCurrentPosition() , при желании, может быть вызвана неоднократно.

Примечание: Вы можете использовать watchPosition() без начального вызова getCurrentPosition() .

Метод watchPosition() возвращает номер > может быть использован для однозначной идентификации запрашиваемой позиции наблюдателя ; вы используете это значение в тандеме с методом clearWatch() , чтобы прекратить просмотр местоположения пользователя .

Точная настройка отклика

И getCurrentPosition() и watchPosition() принимают в качестве аргументов: callback вызываемый при успехе, опциональный параметр error callback, а также, опциональный параметр, PositionOptions object.

Вызов к watchPosition может выглядеть так:

Описание позиции

Местоположение пользователя описывается , используя Position object, привязанного к Coordinates object.

Обработка ошибок

Функция обработки ошибок, при условии, когда вызывается getCurrentPosition() или watchPosition() , ожидает PositionError object в качестве своего первого параметра.

Пример геолокация в реальном времени

HTML Content

JavaScript Content

Работающий пример

Запрос на доступ к данным

Любые дополнения, размещенные на addons.mozilla.org, которые предполагают использование геопозиции, должны явно перед этим запросить разрешение на это. Следующая функция запрашивает разрешение в манере, похожей на всплывающее окно prompt на веб-страницах. Ответ пользователя будет сохранен в pref parameter, если это применимо. Функция, предусмотренная в параметре ответной функции (callback), будет вызвана со значением false или true, указанном в ответе пользователя. Если это true , дополнение сможет получить доступ к данным геолокации.

Кроссбраузерность

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 5 3.5 (1.9.1) 9 10.60
Удалено в 15.0
Пересмотрено в 16.0
5
Feature Android Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? 4.0 (4) 1.0.1 ? 10.60
Удалено в 15.0
Пересмотрено в 16.0
?

Дополнения по Gecko

Firefox включает поддержку обнаружения вашего местонахождения на основании информации о вашем WiFi, используя Google Location Services. В соглашении между Firefox и Google утвержден обмен данными, включая точку доступа WiFi, токен доступа (что-то похожее на 2-недельные cookie), и пользовательский IP адрес. Для дополнительной информации, пожалуйста, ознакомьтесь с Политикой Конфиденциальности Mozilla и Политикой Конфиденциальности Google, которые подробно объясняют, как эти данные могут быть использованы.

Firefox 3.6 (Gecko 1.9.2) добавили поддержку для использования сервиса GPSD (GPS daemon) для геолокации на Linux.

Топ-пост этого месяца:  Порядок свойств в CSS основные правила написания стилей, методы упорядочивания
Добавить комментарий