Геолокация на сайте - HTML5
Блог
Делимся с Вами своими знаниями и новостями
11.10.2014

Геолокация на сайте HTML5 – Часть I

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

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

Теперь давайте протестируем то, что  у нас получилось. Если Вы теперь откроете в браузере свою страницу, то браузер запросит у Вас разрешение на указание своего местоположения. Естественно, чтобы увидеть как работает скрипт надо принять этот запрос. После этого Вы получите результат. Вы скажите: “Да это же чепуха какая-та! А где карта черт побери? Нафиг мне эти цифры!”. Да-да-да. Не стоит так спешить, все будет. Но сначала надо знать основы.

Для того, чтобы Ваш код геолокации всегда работал правильно, нужно следовать советам, которые я укажу ниже.

Порядок действий с API GEOLOCATION

  1. Для начала Вы должны всегда осуществлять проверку того, поддерживает ли браузер посетителя свойство geolocation объекта navigation. Если да, то работаем дальше, если нет, то его надо об этом предупредить. В моем случае я использовал alert.
  2. Если все отлично, браузер поддерживает то, что нам нужно. Тогда можно извлекать наши координаты. Учтите, что navigator.geolocation предсталяет собой объект, который содержит все, что касается геолокации. А также обладает самым главным методом – getCurrentPosition – который и излекает координаты.
  3. Настоятельно прошу Вас ознакомиться с этим методом повнимательней. Итак. У нашего метода есть три параметра. Один из них обязательный, остальные два опциональные. Пример: getCurrentPosition(successPosition, errorHandler, options). SuccessPosition – функция, которая срабатывает, если все нормально и можно извлечь  координаты. ErrorHandler – если не получилось получить данные, вызывается эта функция, опциональная. И options задает дополнительные данные и позволяет сконфигурировать работу API-интерфейса Geolocation. В нашем случае я вызывал только обязательный параметр данного метода – successPosition.
  4. Теперь взглянем на наш обработчик успешного исполнения displayLocation. Он идет с параметром position, который является объектом, в свою очередь содержащим широту и долготу нашего местоположения. Доступ к ним осуществляется с помощью свойств position.coords. Нам только осталось присвоить нашим переменным их значения и вывести в DOM нашей HTML страницы.

Как все это работает?

  1. Как только браузер заходит на Вашу страничку он вызывает метод getCurrenPosition.
  2. Затем API-интерфейс Geolocation запрашивает у пользователя разрешение.
  3. Если пользователь дает разрешение, то API-интерфейс принимает все возможное, чтобы извлечь Ваше местонахождение.
  4. Если ему это удалось он присваивает нашим переменным широту и долготу, а наша функция выводит все это в DOM сайта.

Геолокация – часть II – Обработчик ошибок.

Метки:

Комментарии:

Свяжитесь с нами уже сейчас




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


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