html5指南-4.使用Geolocation实现定位功能
程序员文章站
2023-11-27 10:31:04
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,感兴趣的朋友可以了解下... 13-01-07...
今天我们要学习的是使用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。下面我们看上例的运行结果。
点击允许,获取坐标信息。
现在我们介绍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>
拒绝授权,运行结果:
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
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。下面我们看上例的运行结果。
点击允许,获取坐标信息。
现在我们介绍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>
拒绝授权,运行结果:
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
上一篇: MVC设定默认路由为指定的Area下的某个action
下一篇: C#网站生成静态页面的实例讲解