Блог

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

25.10.2014

Геолокация HTML5 – Часть III

Итак, мы в предыдущих уроках изучили как получать наши координаты, как отлавливать ошибки, пришло время сделать кое-что стоящее, а именно измерить расстояние от точки A до точки Б. Давайте это сделаем!

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

<!doctype html> 
<html>
<head>
    <meta charset="utf-8">
    <title>Геолокация</title>
    <link rel="stylesheet" href="style.css"> <!-- Стили нашей геолокации -->
    <script src="geo2.js"></script> <!-- Разместим в этом скрипте все нужные нам скрипты -->
</head>
<body>
    <div id="location">Здесь будет Ваше местоположение</div>
    <div id="distance">Здесь будет расстояние</div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

<!doctype html>

<html>

<head>

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

</head>

<body>

<div id="location">Здесь будет Ваше местоположение</div>

<div id="distance">Здесь будет расстояние</div>

</body>

</html>

Итак, мы добавили новый div, в который будем вносить расстояние между нашими двумя точками.

Расстояние на карте между двумя координатами из точки A в точку B измеряется по формуле гаверсинуса, знать ее необязательно, поэтому просто в наш файл скриптов, размещаем вот этот код.

function computeDistance (startCoords, destCoords) {
	var startLatRads = degreesToRadians(startCoords.latitude);
	var startLongRads = degreesToRadians(startCoords.longitude);
	var destLatRads = degreesToRadians(destCoords.latitude);
	var destLongRads = degreesToRadians(destCoords.longitude);

	var	Radius = 6371; //радиус Земли в километрах
	var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLongRads - destLongRads)) * Radius;

	return distance;
}

function degreesToRadians (degrees) {
	var radians = (degrees * Math.PI)/180;
	return radians;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function computeDistance (startCoords, destCoords) {

var startLatRads = degreesToRadians(startCoords.latitude);

var startLongRads = degreesToRadians(startCoords.longitude);

var destLatRads = degreesToRadians(destCoords.latitude);

var destLongRads = degreesToRadians(destCoords.longitude);

var Radius = 6371; //радиус Земли в километрах

var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLongRads - destLongRads)) * Radius;

return distance;

}

function degreesToRadians (degrees) {

var radians = (degrees * Math.PI)/180;

return radians;

}

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

var ourCoords = {
	latitude: 40.6693508,
	longitude: -73.9831142
}

1

2

3

4

var ourCoords = {

latitude: 40.6693508,

longitude: -73.9831142

}

Координаты Нью-Йорка мы добавили, теперь осталось внести в нашу функцию координаты Вашего компьютера и посчитать расстояние. Давайте доработаем нашу функцию displayLocation().

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.

	var km = computeDistance(position.coords, ourCoords); //передаем координаты Нью-Йорка и Ваши координаты.
	var distance = document.getElementById("distance");//получаем доступ к нашему элементу DOM
	distance.innerHTML = "Вы находитесь на расстоянии " + km + " км. от Нью-Йорка"; //Выводим наше расстояние.
}

1

2

3

4

5

6

7

8

9

10

11

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.

var km = computeDistance(position.coords, ourCoords); //передаем координаты Нью-Йорка и Ваши координаты.

var distance = document.getElementById("distance");//получаем доступ к нашему элементу DOM

distance.innerHTML = "Вы находитесь на расстоянии " + km + " км. от Нью-Йорка"; //Выводим наше расстояние.

}

Теперь можно протестировать наше приложение и посмотреть, как далеко Вы от Нью-Йорка.

Вы скажете? Что за нафиг? А где карта? В следующем урока мы разберем этот вопрос. Следите за обновлениями.

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

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

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

Геолокация HTML5 – Часть III

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

Рубрики

Мы на Facebook

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

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