首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html5指南-4.使用Geolocation实现定位功能

Posted in HTML / CSS onJanuary 07, 2013

今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下列方法：
getCurrentPosition(callback,errorCallback,options)：获取当前位置；
watchPosition(callback,error,options)：开始监控当前位置；
clearWatch(id)：停止监控当前位置。
note：下面例子使用的浏览器是chrome，使用其他浏览器我不能保证运行结果和例子显示的结果一致。
1.获取当前位置
我们将使用getCurrentPosition方法获取当前位置，位置信息不会以结果的形式直接返回，我们需要使用callback函数进行处理。在获取坐标的过程中会有些延迟，还会问你要访问权限。我们来看下面的例子：

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
</table>
<script>
navigator.geolocation.getCurrentPosition(displayPosition);
function displayPosition(pos) {
var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
for (var i = 0, len = properties.length; i < len; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById('timestamp').innerHTML = pos.timestamp;
}
</script>
</body>
</html>

返回的position对象包含两个属性，coords：返回坐标信息；timestamp：获取坐标信息的时间。其中coords又包括下面属性：latitude：纬度；longitude：经度；altitude：高度；accuracy：精确度（米）；altitudeAccuracy：高度精确度（米）；heading：行进方向；speed：行进速度（米/秒）。
并不是所有的信息都会返回，这取决于你承载浏览器的设备。像有GPS、加速器、罗盘的移动设备会返回大部分信息，家用电脑就不行了。家用电脑获取的位置信息，取决于所处的网络环境或者是wifi。下面我们看上例的运行结果。

html5指南-4.使用Geolocation实现定位功能


点击允许，获取坐标信息。

html5指南-4.使用Geolocation实现定位功能

2.处理异常
现在我们介绍getCurrentPosition的异常处理，他是通过使用errorCallback回调函数实现的。函数返回的参数error包含两个属性，code：错误类型的代码；message：错误信息。code包含三个值：1：用户没有授权使用geolocation；2：无法获取坐标信息；3：获取信息超时。
下面我们看个例子：
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<script>
navigator.geolocation.getCurrentPosition(displayPosition, handleError);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
</script>
</body>
</html>

拒绝授权，运行结果：

html5指南-4.使用Geolocation实现定位功能

3.使用geolocation可选参数项
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用，enableHighAccuracy：使用最好的效果；timeout：超时时间（毫秒）；maximumAge：指定缓存时间（毫秒）。我们来下下面的例子：
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<script>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
</script>
</body>
</html>

4.监视位置变化
下面我们介绍使用watchPosition方法实现位置变化的监视，他的使用方法和getCurrentPosition一样。我们来看例子：
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<button id="pressme">Cancel Watch</button>
<script>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
document.getElementById("pressme").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
</script>
</body>
</html>

当点击Cancel Watch按钮时，停止监视。
demo下载地址：Html5Guide.Geolocation.zip

html5指南-4.使用Geolocation实现定位功能

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 #HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 #HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 #HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 #HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 #HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 #HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 #HTML / CSS
波兰购物网站(52) 沙特阿拉伯购物网站(9) 葡萄牙购物网站(13) 土耳其购物网站(10) 欧洲购物网站(15) 泰国购物网站(30) 斯洛伐克购物网站(7) 奥地利购物网站(28) 阿联酋购物网站(26) 哥伦比亚购物网站(5)
You might like
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
js 小贴士一星期合集
2010/04/07 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python的sorted用法详解
2019/06/25 Python
python基于递归解决背包问题详解
2019/07/03 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python如何telnet到网络设备
2021/02/18 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
幼教简历自我评价
2014/01/28 职场文书
高中军训感言500字
2014/02/24 职场文书
保护环境倡议书100字
2014/05/19 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
违章停车检讨书
2014/10/21 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015选调生工作总结
2015/07/24 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
Nginx报404错误的详细解决方法
2022/07/23 Servers