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>