用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">纬度:&nbsp;&nbsp;</p>

                        <p id="longitude">经度:&nbsp;&nbsp;</p>

                        <p id="accuracy">准确度:&nbsp;&nbsp;</p>

                        <p id="timestamp">时间戳:&nbsp;&nbsp;</p>

                        <p id="currDist">目前旅行距离:&nbsp;&nbsp;</p>

                        <p id="totalDist">旅行总距离:&nbsp;&nbsp;</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 = "纬度:&nbsp;&nbsp;" + latitude;

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

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

                document.getElementById("timestamp").innerHTML = "时间戳:&nbsp;&nbsp;" + 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 = "目前旅行距离:&nbsp;&nbsp;" + currentDistance.toFixed(2) + "km";

                    totalDistance += currentDistance;

                    document.getElementById("totalDist").innerHTML = "旅行总距离:&nbsp;&nbsp;" + 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>

效果展示

我的博客，欢迎交流！
源码戳这