Your Location
您的瀏覽器不支持HTML5 Geolocation。
緯度:
經(jīng)度:
準確度:
時間戳:
目前旅行距離:
旅行總距離:
資訊專欄INFORMATION COLUMN
摘要：那么如何實現(xiàn)一個距離追蹤器呢我的思路是這樣的，前提是瀏覽器支持地理定位，在這個基礎(chǔ)上，獲取用戶位置，更新用戶位置，計算距離，顯示到頁面，這樣就簡單實現(xiàn)了一個距離追蹤器，為了用戶更清楚地看到當(dāng)前位置，這里接入了百度地圖。
HTML5 Geolocation（地理定位）用于定位用戶的位置。那么如何實現(xiàn)一個距離追蹤器呢？我的思路是這樣的，前提是瀏覽器支持h5地理定位，在這個基礎(chǔ)上，獲取用戶位置，更新用戶位置，計算距離，顯示到頁面，這樣就簡單實現(xiàn)了一個距離追蹤器，為了用戶更清楚地看到當(dāng)前位置，這里接入了百度地圖API。
頁面結(jié)構(gòu)如下所示：
判斷瀏覽器是否支持HTML5 GeolocationYour Location
您的瀏覽器不支持HTML5 Geolocation。
緯度:
經(jīng)度:
準確度:
時間戳:
目前旅行距離:
旅行總距離:
在body加載時調(diào)用loadDemo()方法，方法根據(jù)navigator.geolocation來判斷瀏覽器是否支持HTML5 Geolocation；如果navigator.geolocation為true，那么我們就可以開始對用戶位置進行獲取更新
實時獲取用戶位置HTML5可以通過getCurrentPosition() 方法來獲得用戶的位置。但這個只獲取一次，所以我們選用了
watchPosition()這個方法，它能返回用戶的當(dāng)前位置，并繼續(xù)返回用戶移動時的更新位置（就像汽車上的GPS）。
navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
timeout: 10000
});
在不斷獲取位置的同時，調(diào)用updateLocation這個方法，把位置情況顯示在頁面上，當(dāng)然還要調(diào)用計算距離的方法來獲取距離，以及不斷更新百度地圖上的位置。
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 = "經(jīng)度: " + 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;
計算距離
把開始位置和當(dāng)前位置的經(jīng)度緯度作為參數(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ā)者然后獲取一個密鑰，才能使用相關(guān)服務(wù)
戳這 根據(jù)文檔你可以知道如何使用這個API
代碼如下：
var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例
map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //設(shè)置中心點坐標和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("南昌"); //顯示城市,此項必須設(shè)置
map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
// 以下為當(dāng)前位置標注設(shè)置
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標簽
效果展示我的博客，歡迎交流！
源碼戳這
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52148.html
摘要：如果應(yīng)用程序不再需要接受有關(guān)用戶的持續(xù)位置更新，則只需調(diào)用函數(shù)，如下所示表示一個唯一的監(jiān)視請求以便將來取消監(jiān)視。 GeolocationAPI學(xué)習(xí)，我寫的挺枯燥的，直接跳到最后看示例。 5.1 位置信息 HTML5 Geolocation API的使用方法相當(dāng)簡單。請求一個位置信息，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持HTML5地理定位功能的底層設(shè)備(手機、筆記本...
摘要：此項定義緩存的最長時限。瀏覽器返回位置信息的最大超時，以毫秒為單位。后臺任務(wù)會獲取當(dāng)前位置將位置發(fā)送給成功回調(diào)函數(shù)設(shè)置定時器監(jiān)視位置。定時器每次觸發(fā)都會獲取一個新的位置，并且對位置進行比較確認是否存在重大區(qū)別?？蛇x用于處理任何錯誤的函數(shù)。 簡單使用getCurrentPosition獲取當(dāng)前位置 Geolocation API的基本功能是查詢?yōu)g覽器當(dāng)前所處的位置。getCurrentP...
摘要：草案的前身名為，于年被提出，于年被接納，并成立了新的工作團隊。的第一份正式草案已于年月日公布。年月日，萬維網(wǎng)聯(lián)盟正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的規(guī)范已經(jīng)正式定稿。 簡述 最近在苦逼學(xué)習(xí)Javascript，并且是有任務(wù)需要去完成的，因此就有一個想法要總結(jié)記錄一下自己的學(xué)習(xí)成果。這次的總結(jié)主題是html5實現(xiàn)定位地理位置的任務(wù)，結(jié)合原生的Javascript實現(xiàn)此功能。 html5 什...
摘要：草案的前身名為，于年被提出，于年被接納，并成立了新的工作團隊。的第一份正式草案已于年月日公布。年月日，萬維網(wǎng)聯(lián)盟正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的規(guī)范已經(jīng)正式定稿。 簡述 最近在苦逼學(xué)習(xí)Javascript，并且是有任務(wù)需要去完成的，因此就有一個想法要總結(jié)記錄一下自己的學(xué)習(xí)成果。這次的總結(jié)主題是html5實現(xiàn)定位地理位置的任務(wù)，結(jié)合原生的Javascript實現(xiàn)此功能。 html5 什...
閱讀 3466·2023-04-26 00:39
閱讀 4073·2021-09-22 10:02
閱讀 2555·2021-08-09 13:46
閱讀 1108·2019-08-29 18:40
閱讀 1455·2019-08-29 18:33
閱讀 781·2019-08-29 17:14
閱讀 1523·2019-08-29 12:40
閱讀 2983·2019-08-28 18:07
