Реализуйте отслеживание расстояний с помощью геолокации HTML5.

HTML5 Geolocation используется для определения местоположения пользователя. Итак, как реализовать трекер расстояния? Моя идея заключается в том, что браузер поддерживает геолокацию h5. На этой основе определяется местоположение пользователя, обновляется местоположение пользователя, рассчитывается расстояние и отображается на странице. просто реализовано, чтобы пользователям было понятнее. Вы можете напрямую видеть текущее местоположение, которое подключено к API карты Baidu.

Структура страницы следующая:

 <div id=container> <section> <article> <header> <h1>Ваше местоположение</h1> </header> <p class=info id=status>Ваш браузер не поддерживает геолокацию HTML5. </p> <div class=geostatus> <p id=latitude>Широта: </p> <p id=longitude>Долгота: </p> <p id=accuracy>Точность: </p> <p id = timestamp>Отметка времени: </p> <p id=currDist>Текущее расстояние путешествия: </p> <p id=totalDist>Общее расстояние путешествия: </p> </div> </article> </section> <!-- Отображение местоположения на карте Baidu--> <div id=allmap></div> </div>

Определите, поддерживает ли браузер геолокацию HTML5.

Метод loadDemo() вызывается при загрузке тела. Этот метод определяет, поддерживает ли браузер геолокацию HTML5 на основе navigator.geolocation; если navigator.geolocation имеет значение true, мы можем начать получать и обновлять местоположение пользователя.

HTML5 может получить позицию пользователя с помощью метода getCurrentPosition(). Но это получается только один раз, поэтому мы выбрали метод watchPosition(), который может возвращать текущую позицию пользователя и продолжать возвращать обновленную позицию, когда пользователь движется (точно так же, как GPS в автомобиле).

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, {timeout: 10000});

При постоянном получении местоположения вызывается метод updateLocation для отображения местоположения на странице. Конечно, метод расчета расстояния также вызывается для получения расстояния, и местоположение на карте Baidu постоянно обновляется.

 var широта = позиция.коорды.широта;вар долгота = позиция.коорды.долгота;вар точность = позиция.коорды.точность;вар временная метка = позиция.метка времени;документ.getElementById(широта).innerHTML = широта: + широта;документ. getElementById(longitude).innerHTML = долгота: + longitude;document.getElementById(accuracy).innerHTML = точность: + точность;document.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(нужны более точные значения для расчета расстояния. ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, LastLat, LastLong); document.getElementById(currDist).innerHTML = Текущее расстояние путешествия: + currentDistance.toFixed(2) + km; totalDistance += currentDistance; document.getElementById(totalDist). innerHTML = общее пройденное расстояние: + currentDistance.toFixed(2) + km; updateStatus(Location; успешно обновлено.);}lastLat = широта;lastLong = долгота;

Поместите долготу и широту начальной позиции и текущей позиции в функцию в качестве параметров и рассчитайте расстояние (единица измерения: км) путем преобразования.

 Number.prototype.toRadians = function() { return this * Math.PI / 180; } function distance(latitude1, longitude1, latitude2, longitude2) { var R = 6371; var deltaLatitude = (latitude2 - latitude1).toRadians(); var deltaLongitude = (longitude2 - longitude1).toRadians(); latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math .sin(deltaLongitude/2) * Math.sin(deltaLongitude/2); 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d;

Чтобы использовать API Baidu Map, вам необходимо зарегистрировать учетную запись Baidu, подать заявку на то, чтобы стать разработчиком Baidu и получить ключ для использования связанных сервисов. Согласно документации, вы можете узнать, как использовать этот API. Код выглядит следующим образом:

 var map = new BMap.Map(allmap); //Создаем экземпляр карты.centerAndZoom(new BMap.Point(longitude, latitude), 14); //Установим координаты центральной точки и уровень карты.addControl(new BMap). .MapTypeControl ()); //Добавляем элемент управления типом карты.setCurrentCity(Nanchang); //Отображение города, этот элемент должен быть установлен. (point, 14); var маркер = новый BMap.Marker(point); //Создаем маркер map.addOverlay(marker); //Добавляем маркеры на карту marker.setAnimation(BMAP_ANIMATION_BOUNCE //Анимация отскока//Функция API карты Baidu--------end);

 <script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=ваш ключ></script>

Выше представлено введение редактора в использование геолокации HTML5 для реализации отслеживания расстояний. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!