Геолокация 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 + " км. от Нью-Йорка"; //Выводим наше расстояние.
}Теперь можно протестировать наше приложение и посмотреть, как далеко Вы от Нью-Йорка.
Вы скажете? Что за нафиг? А где карта? В следующем урока мы разберем этот вопрос. Следите за обновлениями.
Свяжитесь с нами уже сейчас
- +7 (906) 272-38-19
Tel./ WhatsApp/ Viber - info@cruelten.ru
- Cruelten
- Cruelten
- Cruelten
Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.
