用HTML5 Geolocation实现一个距离追踪器

3人阅读 评论(0) 收藏 举报

HTML5 Geolocation(地理定位)用于定位用户的位置。那么如何实现一个距离追踪器呢?下面本文将为大家围绕这个问题进行介绍,一起来看看吧,希望对大家学习HTML5有所帮助。

首先给大家说下实现思路,实现距离追踪前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示到页面,这样就简单实现了一个距离追踪器,为了用户更清楚地看到当前位置,这里接入了百度地图API

  页面结构如下所示:

 <div id="container">

<section>

<article>

<header>

<h1>Your Location</h1>

</header>

<p id="status">您的浏览器不支持HTML5 Geolocation</p>

<div>

<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>

<!-- 百度地图位置显示 -->

<div id="allmap"></div>    

</div>

  判断浏览器是否支持HTML5 Geolocation

  在body加载时调用loadDemo()方法,方法根据navigator.geolocation来判断浏览器是否支持HTML5 Geolocation;如果navigator.geolocationtrue,那么我们就可以开始对用户位置进行获取更新

  实时获取用户位置

  HTML5可以通过getCurrentPosition() 方法来获得用户的位置。但这个只获取一次,所以我们选用了 watchPosition()这个方法,它能返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的GPS)。

  navigator.geolocation.watchPosition(updateLocationhandleLocationError, {

  timeout: 10000

  });

  在不断获取位置的同时,调用updateLocation这个方法,把位置情况显示在页面上,当然还要调用计算距离的方法来获取距离,以及不断更新百度地图上的位置。

 var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

var accuracy = position.coords.accuracy;

var timestamp = position.timestamp;

document.getElementById("latitude").innerHTML = "纬度:  " + latitude;

document.getElementById("longitude").innerHTML = "经度:  " + longitude;

document.getElementById("accuracy").innerHTML = "准确度:  " + accuracy;

document.getElementById("timestamp").innerHTML = "时间戳:  " + timestamp;

if(accuracy >= 30000) {

updateStatus("Need more accurate values to calculate distance.");

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 successfully updated.");

}

lastLat = latitude;

lastLong = longitude;

  计算距离

  把开始位置和当前位置的经度纬度作为参数放入函数,通过换算,来计算距离(单位为km)

 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 = 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);

var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

var d = R * c;

return d;

}

  百度地图API接入

  要用百度地图API,你需要注册百度账号,申请成为百度开发者然后获取一个密钥,才能使用相关服务戳这 根据文档你可以知道如何使用这个API 代码如下:

  var map = new BMap.Map("allmap"); // 创建Map实例

  map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //设置中心点坐标和地图级别

  map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

  map.setCurrentCity("南昌"); //显示城市,此项必须设置

  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

  // 以下为当前位置标注设置

  var point = new BMap.Point(longitude, latitude);

  map.centerAndZoom(point, 14);

  var marker = new BMap.Marker(point); //创建标注

  map.addOverlay(marker); //将标注添加到地图中

  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

  // 百度地图API功能--------end

  记得先引入一个script标签

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>

 

来源:网络

查看评论

HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法

HTML5提供了Geolocation-API允许我们获取地理位置坐标 不过只有针对特定的需求才会用到 比如说地图应用一般还是很少用到的Geolocation-API使用的方法也很简单 API都...
  • q1056843325
  • q1056843325
  • 2017-03-01 19:00:31
  • 936

HTML5新特性之Geolocation

在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地...
  • liuhe688
  • liuhe688
  • 2016-05-10 11:04:01
  • 1066

Geolocation---HTML5调用百度地图API进行地理定位实例

自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图AP...
  • IT1039871366
  • IT1039871366
  • 2015-06-16 16:41:44
  • 2877

HTML5地理位置Geolocation以及百度地图应用

地理信息位置的知识整理以及百度地图的应用,知识本身可能枯燥,但以为运用巧妙展现各种精彩!...
  • macanfa
  • macanfa
  • 2016-07-18 21:56:11
  • 1902

HTML5 Geolocation(地理定位)用于定位用户的位置。

一、 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 Inte...
  • qq443068902
  • qq443068902
  • 2015-08-31 16:57:35
  • 2054

基于浏览器的HTML5 Geolocation API (地理位置应用程序接口)查找地理位置

navigator.geolocation用于获取基于浏览器的当前用户地理位置,以下代码用户获取用户地理位置的经度和维度。 简易代码如下:        /*获取当前位置*/     function...
  • qq_21429153
  • qq_21429153
  • 2016-11-13 22:11:42
  • 521

HTML5 Geolocation实用性小调查

关于HTML5 Geolocation实用性的一点小调查。从developWorks的一篇文章开始实现并详细说明了HTML5中的Geolocation在各种设备上使用的效果,以及一些关于HTML5定位...
  • dewafer
  • dewafer
  • 2015-05-19 00:03:51
  • 2039

HTML5 之Geolocation API (地理位置应用程序接口)

目前PC浏览器支持情况: Firefox 3.5+ Chrome 5.0+ Safari 5.0+ Opera 10.60+ Internet Explorer 9.0+ 手机支持...
  • liuxiao723846
  • liuxiao723846
  • 2015-07-10 15:27:19
  • 982

html5的geolocation 定位误差大的解决办法

本文为转载文章,原文传送门 感谢原作者 学生党在做比赛作品,项目中需求要用到定位功能并以地图形式展现。所以思路就是用h5的geolocation 获取经纬度,通过百度地图api将经纬度转换成详...
  • qq_34437587
  • qq_34437587
  • 2017-07-10 20:08:42
  • 1272

html5 geolocation

Geolocation Geolocation Demo Live Race Data! Your...
  • jianguo_liao19840726
  • jianguo_liao19840726
  • 2012-06-12 13:39:29
  • 743
    个人资料
    等级:
    访问量: 27万+
    积分: 1万+
    排名: 1436
    文章分类
    最新评论