国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用HTML5 Geolocation實現(xiàn)一個距離追蹤器

gself / 3040人閱讀

摘要:那么如何實現(xiàn)一個距離追蹤器呢我的思路是這樣的,前提是瀏覽器支持地理定位,在這個基礎上,獲取用戶位置,更新用戶位置,計算距離,顯示到頁面,這樣就簡單實現(xiàn)了一個距離追蹤器,為了用戶更清楚地看到當前位置,這里接入了百度地圖。

HTML5 Geolocation(地理定位)用于定位用戶的位置。那么如何實現(xiàn)一個距離追蹤器呢?我的思路是這樣的,前提是瀏覽器支持h5地理定位,在這個基礎上,獲取用戶位置,更新用戶位置,計算距離,顯示到頁面,這樣就簡單實現(xiàn)了一個距離追蹤器,為了用戶更清楚地看到當前位置,這里接入了百度地圖API。

頁面結構如下所示:

Your Location

您的瀏覽器不支持HTML5 Geolocation。

緯度:  

經度:  

準確度:  

時間戳:  

目前旅行距離:  

旅行總距離:  

判斷瀏覽器是否支持HTML5 Geolocation

在body加載時調用loadDemo()方法,方法根據(jù)navigator.geolocation來判斷瀏覽器是否支持HTML5 Geolocation;如果navigator.geolocation為true,那么我們就可以開始對用戶位置進行獲取更新

實時獲取用戶位置

HTML5可以通過getCurrentPosition() 方法來獲得用戶的位置。但這個只獲取一次,所以我們選用了
watchPosition()這個方法,它能返回用戶的當前位置,并繼續(xù)返回用戶移動時的更新位置(就像汽車上的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;
計算距離

把開始位置和當前位置的經度緯度作為參數(shù)放入函數(shù),通過換算,來計算距離(單位為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,你需要注冊百度賬號,申請成為百度開發(fā)者然后獲取一個密鑰,才能使用相關服務
戳這 根據(jù)文檔你可以知道如何使用這個API
代碼如下:

    var map = new BMap.Map("allmap"); // 創(chuàng)建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); //創(chuàng)建標注
                map.addOverlay(marker); //將標注添加到地圖中
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
                // 百度地圖API功能--------end

記得先引入一個script標簽

效果展示

我的博客,歡迎交流!
源碼戳這

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52148.html

相關文章

  • HTML5 Geolocation學習

    摘要:如果應用程序不再需要接受有關用戶的持續(xù)位置更新,則只需調用函數(shù),如下所示表示一個唯一的監(jiān)視請求以便將來取消監(jiān)視。 GeolocationAPI學習,我寫的挺枯燥的,直接跳到最后看示例。 5.1 位置信息 HTML5 Geolocation API的使用方法相當簡單。請求一個位置信息,如果用戶同意,瀏覽器就會返回位置信息,該位置信息是通過支持HTML5地理定位功能的底層設備(手機、筆記本...

    xiyang 評論0 收藏0
  • html5知識點補充—GeoLocation API位置感知

    摘要:此項定義緩存的最長時限。瀏覽器返回位置信息的最大超時,以毫秒為單位。后臺任務會獲取當前位置將位置發(fā)送給成功回調函數(shù)設置定時器監(jiān)視位置。定時器每次觸發(fā)都會獲取一個新的位置,并且對位置進行比較確認是否存在重大區(qū)別。可選用于處理任何錯誤的函數(shù)。 簡單使用getCurrentPosition獲取當前位置 Geolocation API的基本功能是查詢?yōu)g覽器當前所處的位置。getCurrentP...

    shevy 評論0 收藏0
  • Javascript學習總結 - html5實現(xiàn)定位地理位置

    摘要:草案的前身名為,于年被提出,于年被接納,并成立了新的工作團隊。的第一份正式草案已于年月日公布。年月日,萬維網聯(lián)盟正式宣布凝結了大量網絡工作者心血的規(guī)范已經正式定稿。 簡述 最近在苦逼學習Javascript,并且是有任務需要去完成的,因此就有一個想法要總結記錄一下自己的學習成果。這次的總結主題是html5實現(xiàn)定位地理位置的任務,結合原生的Javascript實現(xiàn)此功能。 html5 什...

    Fundebug 評論0 收藏0
  • Javascript學習總結 - html5實現(xiàn)定位地理位置

    摘要:草案的前身名為,于年被提出,于年被接納,并成立了新的工作團隊。的第一份正式草案已于年月日公布。年月日,萬維網聯(lián)盟正式宣布凝結了大量網絡工作者心血的規(guī)范已經正式定稿。 簡述 最近在苦逼學習Javascript,并且是有任務需要去完成的,因此就有一個想法要總結記錄一下自己的學習成果。這次的總結主題是html5實現(xiàn)定位地理位置的任務,結合原生的Javascript實現(xiàn)此功能。 html5 什...

    layman 評論0 收藏0

發(fā)表評論

0條評論

gself

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<