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