H5学习系列之Geolocation API
2016-03-06 13:35
711 查看
获取位置信息途径：
1、IP地址地理定位数据
2、GPS地理定位数据
3、WI-FI地理定位数据
4、手机地理定位数据
无废话直接上重点：navigator.geolocation对象就是获取地理位置信息的关键（目前由于中国大陆防火墙问题，谷歌浏览器无法提供位置服务）
浏览器获取用户位置信息（属于隐私信息），必须首先通过用户同意。
检测浏览器是否支持H5的方法 if(navigator.geolocation){}else {}
单次请求： navigator.geolocation.getCurrentPosition(successCallBack,errorCallback,option)
funciton successCallBack(data){
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>
1、IP地址地理定位数据
2、GPS地理定位数据
3、WI-FI地理定位数据
4、手机地理定位数据
无废话直接上重点：navigator.geolocation对象就是获取地理位置信息的关键（目前由于中国大陆防火墙问题，谷歌浏览器无法提供位置服务）
浏览器获取用户位置信息（属于隐私信息），必须首先通过用户同意。
检测浏览器是否支持H5的方法 if(navigator.geolocation){}else {}
单次请求： navigator.geolocation.getCurrentPosition(successCallBack,errorCallback,option)
funciton successCallBack(data){
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 data-* 自定义属性
- HTMl5的sessionStorage和localStorage
- html5中链接和分组标签
- HTML5+CSS3鼠标移入移出图片生成随机动画
- HTML5开发入门经典教程和案例合集（含视频教程）
- ch5优化
- 利用HTML5新特性localstorage把用户数据暂时存储在客户端，用于之后上传
- html5优越性
- Html5 postMessage实现跨域消息传递
- HTML5 postMessage 和 onmessage API 具体应用
- 感受HTML5 Audio API带来的视听盛宴
- html5初学者经历
- Swiper滑动Html5手机浏览器自适应
- [重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏
- css3 html5文字霓虹灯交替闪烁效果
- 【HTML5】拖放
- Hadoop-2.5.0-cdh5.3.2 HA 安装
- H5学习系列之Audio和Video
- 前端-HTML5 canvas学习
- HTML5进阶(二)HBuilder实现软件自动升级