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

Геолокация на сайте HTML5 – программное решение, позволяющее Вам определять местоположение посетителя сайта и отбирать для него соответствующую информацию. Это очень полезная разработка, которая позволит Вам узнавать местоположение Ваших пользователей, особенно, если у Вашего проекта много региональных сайтов, Вы можете привязывать пользователя к определенной местности и показывать ему ту информацию, которая актуальна именно для него. Сейчас мы научимся реализоваться геолокацию на сайте с помощью API-интерфейса Geolocation. Давайте для начала создадим html файл с таким кодом.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Геолокация</title> <link rel="stylesheet" href="style.css"> <!-- Стили нашей геолокации --> <script src="geo.js"></script> <!-- Разместим в этом скрипте все нужные нам скрипты --> </head> <body> <div id="location">Здесь будет Ваше местоположение</div> </body> </html>
В принципе мы закончили с этим, теперь пришло время для магии HTML5. Создавайте файл geo.js, можете создать и свою любой другой и впишем в него следующий код. Все комментарии в коде.
window.onload = getMyLocation; //Вызываем функцию, которую создадим чуть ниже, она срабатывает сразу же после загрузки нашего сайта. function getMyLocation () { //собственно наша функция для определения местоположения if (navigator.geolocation) { //для начала надо проверить, доступна ли геолокация, а то еще у некоторых браузеры то древние. Там о таком и не слышали. navigator.geolocation.getCurrentPosition(displayLocation); //если все ок, то вызываем метод getCurrentPosition и передаем ей нашу функцию displayLocation, реализую ее ниже. } else { alert("Упс, геолокация не поддерживается"); //выведем сообщение для старых браузеров. } } function displayLocation(position) { //передаем в нашу функцию объект position - этот объект содержит ширину и долготу и еще массу всяких вещей. var latitude = position.coords.latitude; // излвекаем широту var longitude = position.coords.longitude; // извлекаем долготу //Теперь пришло время все это записать в наш DOM var div = document.getElementById("location");//получаем доступ к нашему элементу location в DOM div.innerHTML = "Ваша широта: " + latitude + ", Ваша долгота: " + longitude; //Вставляем нужнные данные в DOM. }
Теперь давайте протестируем то, что у нас получилось. Если Вы теперь откроете в браузере свою страницу, то браузер запросит у Вас разрешение на указание своего местоположения. Естественно, чтобы увидеть как работает скрипт надо принять этот запрос. После этого Вы получите результат. Вы скажите: “Да это же чепуха какая-та! А где карта черт побери? Нафиг мне эти цифры!”. Да-да-да. Не стоит так спешить, все будет. Но сначала надо знать основы.
Для того, чтобы Ваш код геолокации всегда работал правильно, нужно следовать советам, которые я укажу ниже.
Порядок действий с API GEOLOCATION
- Для начала Вы должны всегда осуществлять проверку того, поддерживает ли браузер посетителя свойство geolocation объекта navigation. Если да, то работаем дальше, если нет, то его надо об этом предупредить. В моем случае я использовал alert.
- Если все отлично, браузер поддерживает то, что нам нужно. Тогда можно извлекать наши координаты. Учтите, что navigator.geolocation предсталяет собой объект, который содержит все, что касается геолокации. А также обладает самым главным методом – getCurrentPosition – который и излекает координаты.
- Настоятельно прошу Вас ознакомиться с этим методом повнимательней. Итак. У нашего метода есть три параметра. Один из них обязательный, остальные два опциональные. Пример: getCurrentPosition(successPosition, errorHandler, options). SuccessPosition – функция, которая срабатывает, если все нормально и можно извлечь координаты. ErrorHandler – если не получилось получить данные, вызывается эта функция, опциональная. И options задает дополнительные данные и позволяет сконфигурировать работу API-интерфейса Geolocation. В нашем случае я вызывал только обязательный параметр данного метода – successPosition.
- Теперь взглянем на наш обработчик успешного исполнения displayLocation. Он идет с параметром position, который является объектом, в свою очередь содержащим широту и долготу нашего местоположения. Доступ к ним осуществляется с помощью свойств position.coords. Нам только осталось присвоить нашим переменным их значения и вывести в DOM нашей HTML страницы.
Как все это работает?
- Как только браузер заходит на Вашу страничку он вызывает метод getCurrenPosition.
- Затем API-интерфейс Geolocation запрашивает у пользователя разрешение.
- Если пользователь дает разрешение, то API-интерфейс принимает все возможное, чтобы извлечь Ваше местонахождение.
- Если ему это удалось он присваивает нашим переменным широту и долготу, а наша функция выводит все это в DOM сайта.
Геолокация – часть II – Обработчик ошибок.
Свяжитесь с нами уже сейчас
- +7 (906) 272-38-19
Tel./ WhatsApp/ Viber - info@cruelten.ru
- Cruelten
- Cruelten
- Cruelten
Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению голосом Вашего проекта. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, звоните.
Комментарии: