navigator简介
window对象有一个navigator属性,该属性对应于Navigator对象,该对象代表浏览该页面所使用的浏览器。该对象在不同平台上的信息并不完全相同,但总包含如下几个常用的属性。
➢ appName:返回该浏览器的内核名称。
➢ appVersion:返回该浏览器当前的版本号。
➢ platform:返回当前浏览器所在的操作系统。
例子
<script type="text/javascript">
alert(window.navigator);
var browser = "当前的浏览器信息是:\n";
// 遍历该浏览器的全部属性
for(var propname in window.navigator)
{
// 将所有属性名、属性值连缀在一起
browser += propname + ": " + window.navigator[propname] + "\n"
}
alert(browser);
</script>
HTML 5新增的geolocation属性
HTML 5为navigator新增了一个geolocation属性,这个属性是一个Geolocation对象,通过该对象获取浏览者的地理位置。
Geolocation对象提供了如下3个方法。
➢ getCurrentPosition(onSuccess , onError , options):该方法请求获取地理位置。该方法可以指定3个参数,其中第一个参数代表成功获取地理位置时触发的回调函数;第二个参数代表获取地理位置失败后触发的回调函数;第三个参数用于传入一些额外的选项。该函数的后两个参数是可选的。
➢ int watchCurrentPosition(onSuccess , onError , options):该方法用于持续监听地理位置(该方法相当于周期性地调用getCurrentPosition()方法),该方法的3个参数的意义与前一个方法的3个参数完全相同。该方法返回一个int类型的标识,该标识是这个“监听器”的标识ID,从而允许程序在后面调用clearWatch(watchId)来取消监听。
➢ clearWatch(watchId):该方法用于停止持续监听地理位置。该方法的参数值就是watchCurrentPosition ()方法返回的“监听器”的标识。
上面介绍的3个方法中,前两个方法的形参完全相同,下面详细介绍这3个形参。
获取成功的回调函数
上面介绍的前两个方法的第一个形参就是获取成功的回调函数,它是一个形如function(postion){}的回调函数,该回调函数中的position表示浏览器所获取的地理信息。position对象包含如下两个属性。
➢ timestamp:该属性返回获取地理位置时的时间。
➢ coords:该属性返回一个Coordinates对象。该对象里包含了详细的地理信息。该对象包含如下属性。
□ longitude:返回经度值。
□ latitude:返回纬度值。
□ altitude:返回高度值。
□ accuracy:返回经度和纬度的精度值,以米为单位。
□ altitudeAccuracy:返回高度的精度值,以米为单位。
□ speed:返回浏览器所在设备的移动速度。不能获取速度时返回null。
□ heading:返回浏览器所在设备移动的方向,以指向正北方向顺时针转过的角度来表示。不能获取移动方向时返回null。
□ timestamp:返回获取地理位置时的时间戳。
获取失败的回调函数
上面介绍的前两个方法的第二个形参就是获取失败的回调函数,它是一个形如function(error){}的回调函数,该回调函数中的error包含了错误信息。该error对象包含如下两个属性。
➢ code:返回错误代码。该code有如下几种情况。
1:用户拒绝了位置服务。
2:无法获取地址位置信息。
3:获取地理位置信息超时。
➢ message:返回错误描述信息。但实际上很多浏览器并未提供错误描述信息。
额外的选项
上面介绍的前两个方法的第三个形参就是获取地理信息时的额外选项。该参数应该是一个JavaScript对象,该对象支持如下属性。
➢ enableHighAccuracy:指定是否要求高精度的地理位置信息。
➢ timeout:指定获取地理位置信息时的超时时长。如果没有在该时间内获取到地理位置信息,将会引发错误。
➢ maximumAge:指定地理信息的缓存时间,以毫秒为单位。
获取地理位置
如果需要获取浏览器所在设备的地理位置,只要调用Geolocation对象的getCurrentPosition()方法,并传入合适的参数即可。
例子
<script type="text/javascript">
var geoHandler = function(position)
{
var geoMsg = "用户的所在的地理位置信息是:<br/>";
geoMsg += "timestamp属性为:" + position.timestamp + "<br/>";
// 获取Coordinates对象,该对象里包含了详细的地理位置信息
var coords = position.coords;
// 遍历Coordinates对象的所有属性
for(var prop in coords)
{
geoMsg += prop + "-->" + coords[prop] + "<br/>";
}
// 输出地理位置信息
document.writeln(geoMsg);
}
var errorHandler = function(error)
{
// 为不同错误代码定义错误提示
var errMsg = {
1: '用户拒绝了位置服务',
2: '无法获取地址位置信息',
3: '获取地理位置信息超时'
};
// 弹出错误提示
alert(errMsg[error.code]);
}
// 获取地理位置信息
navigator.geolocation.getCurrentPosition(geoHandler
, errorHandler
, {
enableHighAccuracy:true,
maximumAge:1000
});
</script>
在Google地图上定位
通过浏览器获取地理位置信息之后,接下来可以利用地理位置信息做很多事情,比如在社交网络应用中,通过地理位置信息识别到用户的地理位置,这样用户就可以选择距离自己最近的用户交流。
下面将会在HTML页面上引入Google地图,并利用浏览器获取的地理位置信息在Google地图上定位。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 在地图上定位 </title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
navigator.geolocation.getCurrentPosition(function(position)
{
// 获取浏览器提供的地理位置信息
var latlng = new google.maps.LatLng(position.coords.latitude
, position.coords.longitude);
// 设置创建Google地图的选项
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 获取页面上的map_canvas组件
var mapDiv = document.getElementById("map_canvas");
// 创建Google地图,指定把地图显示到mapDiv组件上
var map = new google.maps.Map(mapDiv , myOptions);
// 在地图上创建标记
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.BOUNCE,
map: map
});
// 设定标注窗口,并指定该窗口中的注释文字
var info = new google.maps.InfoWindow({
content: "我在这里!"
});
// 打开标注窗口
info.open(map, marker);
},
function(error){alert("您的浏览器没有提供地理位置信息!");}
,
{
enableHighAccuracy:true,
maximumAge:1000
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
注:本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ,详细内容请参阅书籍。