Геолокация на сайте 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
Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.
