HTML5笔记-地理定位

地理定位(Geolocation)是一个可以获取到客户端经纬度等地理位置信息的API。 API本身是不知道客户端地理信息的,常见的地理位置信息来源有全球定位系统(GPS)和从网络信号中推断出的地理信息(如IP地址, RFID, WIFI, 蓝牙MAC地址, GSM/CDMA手机id,以及用户输入的信息 ) 先来了解下Geolocation API: //返回地理定位对象 var geo = navigator.geolocation; /* *方法,获取当前客户端地理位置 *有三个参数可以用 *successCallback:必需,函数,获取成功后的回调函数 *errorCallback:可选,函数,失败时的回调函数 *options:可选,对象字面量,有三个值可设定: * enableHighAccuracy:是否启用高精度设备(高精度设备包含但不局限于前面所提到的 GPS 和 WIFI) * maximumAge:数值,如果将其定义为负数或者未定义,会重设为0 * timeout:数值,请求获取地理信息时的超时时间,如果将其定义为负数会重设为0,如果未定义则不启用超时判断 */ geo.getCurrentPosition(successCallback,errorCallback,options); /* *方法,持续监控当前客户端地理位置(实时) *返回该watchPosition的id*参数同getCurrentPosition */ var watchGEO = geo.watchPosition(successCallback,errorCallback,options); /*方法,结束指定ID的watchPosition*/ geo.clearWatch(watchId); 使用地理定位API需要获得用户的许可,如果没有,会执行errorCallback; watchPosition的successCallback只有在获取到的实时地理位置和之前有较大不同时才会执行; getCurrentPosition和watchPosition的successCallback都有一个position参数,它包含有详细的地理信息如经纬度: geo.getCurrentPosition(function (pos) {//成功获取时执行 var coord = pos.coords, //坐标detail accuracy = coord.accuracy, //精准度,单位为米 latitude = coord.latitude, //纬度 longitude = coord.longitude, //经度 altitudeAccuracy = coord.altitudeAccuracy, //高度精确度,单位为米 heading = coord.heading, //移动的方向 speed = coord.speed; //速度 showLocationInfo(coord,‘map’); //显示坐标信息 showMap(coord,‘map’); //显示google地图 }, function (error) {//获取失败时执行 alert(‘error:’+error.message+‘\n\n无法获得您的地理位置:’); }); 取到经纬度就可以利用各map服务商的app来显示地图,如google map

November 3, 2011 · 1 min · 88 words · jabin

HTML5笔记-离线应用

为了能够让用户在离线状态下继续访问 Web 应用,需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。 开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地。 我们通过 W3C 提供的示例来说明。Clock Web 应用由三个文件“clock.html”、“clock.css”和“clock.js”组成。 <!-- clock.html --> < !DOCTYPE HTML> <html> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </link></head> <body> <p>The time is: <output id="clock"></output></p> </body> </html> /* clock.css */ output { font: 2em sans-serif; } /* clock.js */ setTimeout(function () { document.getElementById('clock').value = new Date(); }, 1000); 当用户在离线状态下访问“clock.html”时,页面将无法展现。为了支持离线访问,开发者必须添加 cache manifest 文件,指明需要缓存的资源。这个例子中的 cache manifest 文件为“clock.manifest”,它声明了 3 个需要缓存的资源文件“clock.html”、“clock.css”和“clock.js”。 clock.manifest 代码 ...

November 3, 2011 · 2 min · 263 words · jabin

HTML5笔记-web本地存储

Web Storage就是放大版的cookie——提供了比cookie更大的本地存储,并且不会向服务器发出请求,并提供了一些API。总之本地存储能更专业地处理本地数据。 可以像对象字面量那样使用Web Storage: localStorage.fresh = "vfresh.org"; //设置一个键值 var a = localStorage.fresh; //获取键值 delete localStorage['fresh'] //删除键值 或者使用它的API: //清空storage localStorage.clear(); //设置一个键值 localStorage.setItem("fresh","vfresh.org"); //获取一个键值 localStorage.getItem("fresh"); //return "vfresh.org" //获取指定下标的键的名称(如同Array) localStorage.key(0); //return "fresh" //删除一个键值 localStorage.removeItem("fresh"); 字面量方式比API更高效,也更方便,所以你懂的。 localStorage是永久性的保存,而sessionStorage在浏览器窗口关闭后就没有了(相当于Expire=0的cookie)。 支持浏览器:IE 8+, Firefox 3.0+, Safari 4.0+, Chrome 4.0+, Opera 10.5+

November 3, 2011 · 1 min · 43 words · jabin