H5學習系列之Geolocation API

時間 2019-11-30

標籤 h5 學習系列 geolocation api 简体版

原文原文鏈接

獲取位置信息途徑：javascript

一、IP地址地理定位數據html

二、GPS地理定位數據html5

三、WI-FI地理定位數據java

四、手機地理定位數據jquery

無廢話直接上重點：navigator.geolocation對象就是獲取地理位置信息的關鍵（目前因爲中國大陸防火牆問題，谷歌瀏覽器沒法提供位置服務）git

瀏覽器獲取用戶位置信息（屬於隱私信息），必須首先經過用戶贊成。json

檢測瀏覽器是否支持H5的方法 if(navigator.geolocation){}else {}瀏覽器

單次請求： navigator.geolocation.getCurrentPosition(successCallBack,errorCallback,option)dom

funciton successCallBack(data){ui

data.coords.latitude 維度；

data.coords.longitude 經度

data.coords.accuracy 準確度

data.coords.altitude 海拔（m）

data.coords.altitudeAccuracy 海拔準確度(m)

data.coords.headig 行進方向相對於正北而言

data.coords.speed 地面速度 m/s

以上參數若是設備不支持返回null

}

function errorCallback(error) {
switch (error.code) {
case 0:
updateErrorStatus("There was an error while retrieving your location.Additional details:" + error.message);
break;
case 1:
updateErrorStatus("The user opted not to share his or her location details:" + error.message);
break;
case 2:
updateErrorStatus("the browser was uable to determine your location. Additional details:" + error.message);
break;
case 3:
updateErrorStatus("The browser timed out before retrieving the location");
break;
}

第三個參數須要摻入json對象{timeout:10000//計算當前位置所容許的最大時間,maxinumAge:100000,//瀏覽器從新計算位置的時間間隔}

重複請求位置

navigator.geolocation.watchaPositino(updateFunciton,errorFunction);//updateFunction只要用戶位置發生變化就出發；

此方法會返回一個id，若是要終止此方法就navigator.geolocation.clearwatch(id)

一下代碼附上一個小案例：計算用戶移動的距離

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Geolocation</title>
</head>
<body onload="loadDemo()">
<header>
<h1>Odometer Demo</h1>
<h4>Live Race Deta!</h4>

</header> <div id="container" > <section> <article> <header> <h1>你的位置</h1> </header> <p id="status" class="info">你的瀏覽器沒有容許獲取位置</p> <div class="geostatus"> <p id="latitude">Latitude(維度):</p> <p id="longitude">longitude(精度):</p> <p id="accuracy">accuracy(精確度):</p> <p id="timestamp">timestamp(時間戳):</p> </div> </article> </section> </div> <footer> <h2>Powered by html5,and your feet!</h2> </footer></body></html><script src="Scripts/jquery-2.2.1.js"></script><script type="text/javascript"> var totalDistance = 0.0; var lastLat; var lastLong; Number.prototype.toRadians = function () { return this * Math.PI / 180; } function Distance(latitude1, longitude1, latitude2, longitude2) { var R = 6371; var deltalatitude = (latitude2 - latitude1).toRadians(); var detalongtude = (longitude2 - longitude1).toRadians(); latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltalatitude / 2) * Math.sin(detalongtude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltalatitude / 2) * Math.sin(deltalatitude / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; } function updateErrorStatus(message) { document.getElementById("status").style.background = "papayaWhip"; document.getElementById("status").innerHTML = "<strong>Error</strong>:" + message; } function updateStatus(message) { document.getElementById("status").style.background = "paleGreen"; document.getElementById("status").innerHTML = message; } function loadDemo() { if (navigator.geolocation) { document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your brower"; navigator.geolocation.watchPosition(updateLocation, handlerLocationError); } } function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; var timestamp = position.timestamp; $("#latitude").html("Latitude:" + latitude); $("#longitude").html("longitude:" + longitude); $("#accuracy").html("accuracy:" + accuracy); $("#timestamp").html("timestamp:" + 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); $("#currDist").html("Current distance traveled:" + currentDistance.toFixed(2) + "km"); totalDistance += currentDistance; $("#totalDist").html("Total distance traveled:" + totalDistance.toFixed(2) + "km"); updateErrorStatus("LocaTION SUCCESSFULLY UPDATED."); lastLat = latitude; lastLong = longitude; } } function handlerLocationError(error) { switch (error.code) { case 0: updateErrorStatus("There was an error while retrieving your location.Additional details:" + error.message); break; case 1: updateErrorStatus("The user opted not to share his or her location details:" + error.message); break; case 2: updateErrorStatus("the browser was uable to determine your location. Additional details:" + error.message); break; case 3: updateErrorStatus("The browser timed out before retrieving the location"); break; } } navigator.geolocation.getCurrentPosition()</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。