Блог

Делимся с Вами своими знаниями и новостями

11.10.2014

Геолокация на сайте 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>

1

2

3

4

5

6

7

8

9

10

11

12

<!doctype html>

<html>

<head>

<title>Геолокация</title>

</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.
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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 – Обработчик ошибок.

Плавное увеличение изображения при наведении CSS

В плагине Advance Recents Posts не отображаются превью

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

+7 (906) 272-38-19
Tel./ WhatsApp/ Viber
info@cruelten.ru
Cruelten
Cruelten

Последнее в блоге

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

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

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

Рубрики

Мы на Facebook

Творческая студия #Cruelten

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