用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 = "緯度:  " + 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>

效果展現

個人博客，歡迎交流！
源碼戳這