网站建设
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言
HTML5的地理位置Geolocation API让我们可以直接使用JavaScript脚本获取地理位置信息。但此功能在移动设备上支持较好,台式机往往无法获取到相关信息。
Geolocation API定义了一个基于主机设备实现的高层次接口,用于获取地理位置信息,如经纬度,API本身无法知道地理位置信息的来源。如果需要使用基于地理位置的应用,则需要经过用户的授权。
1.地理位置信息:
地理位置信息来自于世界大地测量系统(World Geodetic System)。最基本的地理位置包括经度和纬度,,完整的地理位置坐标信息还包括经纬度的精确度、海拔高度、海拔高度的精确度、移动方向、移动速度。根据终端设备的功能不同,地理位置信息的完整性会有差异。如果这些数据不存在,则返回null。
2.地理位置信息的来源:
HTML5 Geolocation API并没有指定地理位置信息的来源,以及以何种方式获取地理位置信息,这部分工作是由浏览器完成的。浏览器收到地理位置信息请求时,会访问地理位置信息的来源,以获取相应的地理位置信息。
常见的地理位置信息来源有:GPS(全球定位系统)、网络信号位置(如IP地址、WIFI的MAC地址等)、GSM/CDMA手机的ID、用户自定义数据。
至于使用哪种地理位置信息来源,则取决于用户终端设备的功能。有些移动设备会支持GPS、WiFi、蓝牙等功能,但台式机则一般仅支持IP地址。所以,在实际的应用中,并不能保证用户设备返回的实际位置是精确的。
3.隐私策略:
地理位置信息的泄露会损害用户的隐私,Geolocation API明确规范了用户隐私的保护机制,即通过Geolocation API获取用户位置信息要明确获得用户的许可。
在没有用户许可的情况下,浏览器不能向Web站点发送地理位置信息;浏览器必须通过一个用户界面向用户提示以获得许可,或者该站点已经与用户建立了信任关系;用户界面必须包括URI的主机部分;如果页面跳转到其他没有许可的页面,则需要撤销保存的会话和许可。
对于一些用户代理将预先建立信任关系,不再需要上述的用户界面,例如VOIP电话可能不存在任何用户界面,就产生了地理位置许可。
应用程序只能在必要的时候请求地理位置信息,应用程序只能在提供给它们的任务中使用地理位置信息。一旦任务完成,应用程序必须释放地理位置信息,除非用户明确许可,否则不能保存位置信息。应用程序必须防止未经授权的访问,如果地理位置信息被保存,则应允许用户删除或更新该信息。
应用程序不能转发未经用户许可的地理位置信息,提倡重传时使用加密的方式。在收集地理位置数据时,应用程序应该明确、清楚地披露:会收集位置信息、为什么收集、数据会保留多久、如何保证数据安全、位置数据如何使用、位置数据如何共享、用户如何访问和更新或删除。
4.检测Geolocation的浏览器支持情况:
在HTML5的所有新增功能中,Geolocation是第一批被全部接受和实现的功能之一,相关规范也已达到相对成熟的阶段。但,使用Geolocation之前,还是有必要检测浏览器是否支持该功能,通常是直接检测navigator.geolocation对象是否存在。示例:
if (navigator.geolocation) {
alert("浏览器支持Geolocation API");
} else {
alert("浏览器不支持Geolocation API");
}
5.单次获取地理信息:
在许多应用中,只请求一次用户的地理位置即可。单次请求地理位置,使用的是地理位置API的getCurrentPosition()方法:
function successCallback(position) {
//显示position中的地理位置信息
}
function errorCallback(error) {
//显示error中的错误信息
}
Var options={}; //可选参数
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
}
Navigator.geolocation通过getCurrentPosition()方法向浏览器底层设备请求地理位置信息,该方法有3个参数,第一个参数是必需的,其他两个可选。如果请求成功,则调用回调函数successCallback();如果请求失败,则调用回调函数errorCallback();参数options是在请求中附加一些特性。
1)回调函数successCallback():
successCallback()回调函数是getCurrentPosition()方法中的必须参数。一旦地理位置信息请求成功,就会调用successCallback()回调函数,该函数的参数position包含了请求到的地理位置信息coords。
参数position包含了7个方面的信息,latitude(纬度)、longitude(经度)、accuracy(经纬度的精确度)、altitude(海拔高度)、altitudeAccuracy(海拔高度精确度)、heading(移动方向)、speed(移动速度)。其中前三个信息是必需的数据,其他信息不保证浏览器都能支持,如果不支持则返回null。完善回调函数:
function successCallback(position) {
var tmp="<table border='0' cellpadding='0' cellspacing='1'>";
tmp+="<tr><td>纬度</td><td>"+position.coords.latitude+"</td></tr>";
tmp+="<tr><td>经度</td><td>"+position.coords.longitude+"</td></tr>";
tmp+="<tr><td>经纬精度</td><td>"+position.coords.accuracy+"</td></tr>";
tmp+="<tr><td>海拔</td><td>"+position.coords.altitude+"</td></tr>";
tmp+="<tr><td>海拔精度</td><td>"+position.coords.altitudeAccuracy+"</td></tr>";
tmp+="<tr><td>前进方向</td><td>"+position.coords.heading+"</td></tr>";
tmp+="<tr><td>移动速度</td><td>"+position.coords.speed+"</td></tr>";
tmp+="</table>";
document.getElementById("resultText").innerHTML=tmp;
}
2)回调函数errorCallback():
errorCallback()函数是可选的参数,只要getCurrentPosition()方法请求不成功,都会调用回调函数errorCallback(),包括未被用户许可。
errorCallback()函数中包含了一个error参数,记录了错误的代码和错误信息。其中错误代码中的错误编号代表了不同的含义,见下表:
代码 | 编号 |
说明 |
PERMISSION_DENIED |
1 |
表示用户选择拒绝浏览器获得其地理位置信息 |
POSITION_UNAVAILABLE |
2 |
表示已尝试获取用户的地理位置,但失败了 |
TIMEOUT |
3 |
如果用户设置了可选的timeout值,出现了超时 |
在出现错误的情况下,需要让用户知道应用程序出了问题,或者还会希望再次尝试请求,需要完善回调函数errorCallback():
function errorCallback(error) {
var err="";
switch (error.code) {
case error.PERMISSION_DENIED:
err="用户阻止了该页面获取地理位置:"+error.message;
alert(err);
break;
case error.POSITION_UNAVAILABLE:
err="浏览器没能获取到地理位置:"+error.message+"\n是否尝试再次请求?";
confirm(err)?navigator.geolocation.getCurrentPosition(successCallback, errorCallback):"";
break;
case error.TIMEOUT:
err="获取地理位置超时:"+error.message+"\n是否尝试再次请求?";
confirm(err)?navigator.geolocation.getCurrentPosition(successCallback, errorCallback):"";
break;
default:
err=""+error.message;
alert(err);
break;
}
}
3)可选参数options:
可选参数options是一个对象参数,其中包含了3个属性:
·enableHighAccuracy:默认为false。如果设置为true,则会通知浏览器启用高精度模式。
·timeout:可选值,单位ms,默认为Infinity,设置当前位置请求所允许的最长时间。
·maximumAge:可选值,单位ms,默认0,设置浏览器重新计算地理位置的时间间隔,即更新位置信息的频率。只要浏览器在该时间段之内成功请求过位置信息,就不会重新计算位置,直接使用之前获取的位置信息。示例:
var options={timeout:5000,maximumAge:600000};
6.重复性的位置信息更新:
在一些应用中,需要不断地更新用户的地理位置信息。HTML5 Geolocation提供了重复更新地理位置信息的方法watchPosition()。方法:
var watchId=navigator.geolocation.watchPosition(successCallback,errorCallback,options);
watchPosition()方法会首先返回一个watchId,然后以既定时间间隔不断地请求位置信息。如果用户想关闭更新,可以使用clearWatch()方法:
navigator.geolocation.clearWatch(watchId);
watchPosition()方法中设置的timeout属性,是指每一次请求位置信息时的过期时间,而不是总的过期时间;位置信息更新的频率会参考maximumAge属性。当再次请求位置信息时,只有当请求的位置发生变化时,才会调用回调函数successCallback()。