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

HTML5 Geolocation（地理定位）用于定位用户的位置。那么如何实现一个距离追踪器呢？我的思路是这样的，前提是浏览器支持h5地理定位，在这个基础上，获取用户位置，更新用户位置，计算距离，显示到页面，这样就简单实现了一个距离追踪器，为了用户更清楚地看到当前位置，这里接入了百度地图API。

页面结构如下所示：

div id="container">
     section>
      article>
       header>
        h1>
    Your Location/h1>
       /header>
       p class="info" id="status">
    您的浏览器不支持HTML5 Geolocation。/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>
     !-- 百度地图位置显示 -->
     div id="allmap">
    /div>
        /div>
    

判断浏览器是否支持HTML5 Geolocation

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

实时获取用户位置

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

navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
        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实现一个距离追踪器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！