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

Итак, мы добавили новый 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;
}

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

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 + " км. от Нью-Йорка"; //Выводим наше расстояние.
}

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

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

Метки: Геолокация

Новостной дайджест #3

Решение проблемы — an error occurred while processing this directive

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

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.

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

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

Рубрики

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