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

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>

 

来源:网络

阅读更多
上一篇如何做好公众号竞品分析?
下一篇用户运营的3个核心本质,你应该了解
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭