地理位置信息概述
地理位置信息的内容
浏览器的“位置信息”是指安装浏览器的硬件设备的位置信息,主要指设备当前地理位置的纬度(latitude)与当前地理位置的经度(longitude)信息。
地理位置元信息的来源
- IP地址
- GPS
- 移动电话基站或无线Wi-Fi
- 用户输入
地理位置信息使用
- 确定用户在Web应用中需要使用地理信息,例如,用户的地理位置、当前位置的海拔、移动方向等。
- 调用Geolocation API,执行地理位置方法调用,得到需要的位置数据,如果使用地图,还需要使用Google的地图API、百度地图API、Bing
地图API等。 - 浏览器解析用户的Geolocation API调用,并提示用户是否允许调用位置信息。
- 浏览器检索运行Web应用设备的信息,得到括地理位置信息的元数据。
- 为Web应用提供基于位置的服务,例如Web页面根据当前的位置设置显示的语言、从数据库中读取当前位置的天气信息、测试位置移动距和离速度等。
地理位置API
HTML5的Geolocation API 包括3个方法:getCurrentPosition()、watchPosition()、clearWatch()。
getCurrentPosition()方法
getCurrentPosition()用来获取用户当前位置的地理信息。
void getCurrentPosition(onSuccess,onError,options);
参数说明
- 第1个参数onSuccess:该参数是获取地理位置信息成功时的回调函数句柄。
- 第2个参数onError:可选参数,是获取地理位置信息失败时的回调函数句柄。
- 第3个参数options:可选参数,用来提供一个options对象给地理定位服务,通过一些可选属性的列表来指定搜集数据的选项,例如设置等候超时的时间。
watchPosition()方法
用来持续获取用户的地理位置信息,它会定期地自动获取。
int watchPosition (onSuccess,onError,options);
该方法三个参数的含义与getCurrentPosition方法的参数说明与使用方法相同。
watchPosition()方法有返回值,该值可以当作参数传递给clearWatch()方法,以取消追踪,从clearWatch()方法的格式可以看出来。
clearWatch()方法定义:
void clearWatch(wacthId)
获取地理位置信息的应用
使用getCurrentPosition()方法获取地理位置信息的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取详细地理位置信息</title>
<script>
var loc;
// 页面加载完成时onload()方法调用
function init() {
loc = document.getElementById("location");
time = document.getElementById("time");
}
// 单击按钮时调用该方法
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
loc.innerHTML = "您的浏览器不支持HTML5地理位置.";
}
}
// getCurrentPosition方法调用成功时调用该方法
function showPosition(position) {
loc.innerHTML = "纬度: " + position.coords.latitude + "<br/>" +
"经度: " + position.coords.longitude + "<br/>" +
"海拔: " + position.coords.altitude + " 米<b/r>" +
"精度: " + position.coords.accuracy + " 米<br/>" +
"海拔精度: " + position.coords.altitudeAccuracy + " 米<br/>" +
"速度: " + position.coords.speed + " 米/秒<br/>";
// 转换 timestamp为可阅读格式
var d = new Date(position.timestamp);
time.innerHTML = d.toLocaleDateString() + " " + d.toLocaleTimeString();
}
</script>
</head>
<body onLoad="init();">
<p id="location">单击按钮获取你的位置:</p>
<p id="time"></p>
<button onClick="getLocation()">获取地理位置信息</button>
</body>
</html>
在getCurrentPosition()方法中进行错误处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>错误处理</title>
<script>
var loc;
function init() {
loc = document.getElementById("location");
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
loc.innerHTML = "你的浏览器不支持html5地理位置.";
}
}
// 当getCurrentPosition方法调用成功时调用该方法
function showPosition(position) {
loc.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
// 当getCurrentPosition调用失败时调用该方法
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
loc.innerHTML = "用户拒绝地理位置请求."
break;
case error.POSITION_UNAVAILABLE:
loc.innerHTML = "位置信息不可用."
break;
case error.TIMEOUT:
loc.innerHTML = "获取位置信息请求超时."
break;
case error.UNKNOWN_ERROR:
loc.innerHTML = "一个未知错误发生."
break;
}
}
</script>
</head>
<body onLoad="init();">
<p id="location">单击你的按钮获取你的位置:</p>
<button onClick="getLocation()">获取地理位置信息</button>
</body>
</html>
在静态地图显示用户位置
申请百度地图密钥
网址:http://lbsyun.baidu.com/apiconsole/key
<!DOCTYPE html>
<html>
<title></title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript">
var x = 111.248024, y = 21.910679;
window.onload = function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
// 百度地图API功能
var map = new BMap.Map("container");
var point = new BMap.Point(x, y);
map.centerAndZoom(point, 12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if(this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
} else {
alert('failed' + this.getStatus());
}
}, {
enableHighAccuracy: true
})
return;
}
alert("你的浏览器不支持获取地理位置!");
};
function showPosition(position) {
x = position.coords.latitude;
y = position.coords.longitude;
}
</script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>
使用 watchPosition()查看位置改变信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onLoad="init();">
<script>
var loc;
var counter = 0;
var watchId;
function init() {
loc = document.getElementById("location");
}
function startWatch() {
if (navigator.geolocation) {
var options = {enableHighAccuracy: true, timeout: 2000};
watchId = navigator.geolocation.watchPosition(showPosition, showError, options);
} else {
loc.innerHTML = "您的浏览器不支持html5地理位置.";
}
}
function clearWatch() {
navigator.geolocation.clearWatch(watchId);
}
// 当getCurrentPosition方法调用成功时调用该方法
function showPosition(position) {
loc.innerHTML = "计数器: " + counter++ + "<br>" +
"经度: " + position.coords.latitude + "<br>" +
"纬度: " + position.coords.longitude;
}
// 当getCurrentPosition调用失败时调用该方法
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
loc.innerHTML = "用户拒绝地理位置请求."
break;
case error.POSITION_UNAVAILABLE:
loc.innerHTML = "位置信息不可用."
break;
case error.TIMEOUT:
loc.innerHTML = "获取位置信息请求超时."
break;
case error.UNKNOWN_ERROR:
loc.innerHTML = "一个未知错误发生."
break;
}
}
</script>
<p id="location">单击按钮获取你的位置:</p>
<button onClick="startWatch()">开始观察</button>
<button onClick="clearWatch()">停止观察</button>
</body>
</html>