JS30. Задание 21 Geolocation based Speedometer and Compass

Демо: https://js3021.github.io/
Код: https://github.com/js3021/js3021.github.io

Приложение определяет местоположение пользователя, для мобильных устройств указывает направление на север, для движущихся устройств показывает скорость передвижения.

Оно будет запрашивать доступ к местоположению пользователя, что связано с настройками безопасности. По той же причине ему требуется для работы доступ по безопасному протоколу https:// или размещение на локальном сервере.

Разметка простая:

        <div class="arrow"></div>
        <h1 class="speed">
            <span class="speed-value">0</span>
            <span class="units">KM/H</span>
        </h1>

Стили оставила прежние, только фоновый svg перенесла в стили, что кажется более лаконичным и логичным.

Было:

Стало:

.arrow {
background: url("bg.svg");
}

JS-код

Основой кода является определение координат текущего местоположения пользователя.
Зная эти координаты можно определить угол между данными координатами и направлением на север, на который повернётся стрелка компаса, по изменению координат за единицу времени определяется скорость передвижения.

Для определения текущего местоположения пользователя JavaScript использует Geolocation API

У JS есть три способа определить местоположение:

GPS – для мобильных устройств, наиболее точный метод (погрешность в пределе 10 метров), но при этом достаточно медленный. Устройства с GPS могут потребовать минуту и даже больше, чтобы исправить данные GPS.
WiFi – доступен для всех подключённых устройств. Довольно точен.
Геолокация по IP - наименее точный метод.

JS задействует все три метода, поэтому сначала могут быть возвращены менее точные данные (месторасположение IP или wifi) и только потом месторасположение по GPS

Функция для определения текущих координат пользователя:

    var latitude  = position.coords.latitude; // широта
    var longitude = position.coords.longitude; // долгота

Код полностью:

var arrow = document.querySelector(".arrow");
var units = document.querySelector(".units");

navigator.geolocation.getCurrentPosition(function(position) {
    var latitude  = position.coords.latitude; // широта
    var longitude = position.coords.longitude; // долгота
    
    units.innerHTML = "<span>Ваши координаты:</span><br>Широта: " + latitude.toFixed(3) + "° <br>Долгота: " + longitude.toFixed(3) + "°<br>";

    var img = new Image();
    img.style.margin = "20px";
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    units.appendChild(img);
});

Этот код намного проще того, который предлагает автор. Он показывает координаты пользователя и его местоположение его на карте.

Работает в Хроме.

Поиск по этому блогу

Изучаем JavaScript

JS30. Задание 21 Geolocation based Speedometer and Compass