HTML5+CSS3网页设计基础教程第10章-Geolocation地理位置ppt课件

第1页,第10章Geolocation地理位置,本章概述本章的学习目标主要内容,第2页,本章概述,HTML5新增了地理位置应用程序接口GeolocationAPI，它提供了一个可以准确感知浏览器用户当前位置的方法。如果浏览器支持，且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。该GeolocationAPI可以应用于移动设备中的地理位置。,第3页,本章的学习目标,了解位置信息的表示方式；熟悉位置信息的来源，包括IP定位、GPS定位、Wi-Fi定位、手机定位以及自定义定位这5种来源；掌握GeolocationAPI的方法，包括检查浏览器支持性、获取当前地理位置、持续监视位置信息变化、停止获取位置信息、隐私保护、处理位置信息和position对象的使用等。掌握使用GeolocationAPI开发实用应用程序。,第4页,主要内容,10.1GeolocationAPI的基本知识10.2使用GeolocationAPI10.3案例实战10.4本章小结,第5页,10.1GeolocationAPI的基本知识,10.1.1位置信息表示方式10.1.2位置信息来源,第6页,10.1.1位置信息表示方式,位置信息主要由一堆纬度和经度坐标组成，例如：Latitude:40.12444,Longitude:-120.11223在这里，Latitude表示纬度，而Longitude表示经度。,第7页,10.1.2位置信息来源,GeolocationAPI不指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是用于检索信息的API，而且通过该API检索到的数据只具有某种程度的准确性。它并不能保证设备返回实际位置是精确的。设备可以使用的数据包括：IP地址、三维坐标（GPS全球定位系统，从RFID、Wi-Fi和蓝牙到Wi-Fi的MAC地址，GSM或CDMA手机的ID）。,第8页,主要内容,10.1GeolocationAPI的基本知识10.2使用GeolocationAPI10.3案例实战10.4本章小结,第9页,10.2使用GeolocationAPI,10.2.1检查浏览器支持性10.2.2获取当前地理位置10.2.3持续监视位置信息10.2.4停止获取位置信息10.2.5隐私保护10.2.6处理位置信息10.2.7position对象,第10页,10.2.1检查浏览器支持性,检测代码如下：functionloadDemo()if(navigator.geolocation)document.getElementById(“support”).innerHTML=支持HTML5Geolocation;elsedocument.getElementById(“support”).innerHTML=当前浏览器不支持HTML5Geolocation;,第11页,10.2.2获取当前地理位置,使用getCurrentPosition方法可以取得用户当前的地理位置信息，该方法的使用格式如下：voidgetCurrentPositon(onSuccess,onError,options);其中，第一个参数为获取当前地理位置信息成功时所执行的回调函数，第二个参数为获取当前地理位置失败时所执行的回调函数，第三个参数是一些可选属性的列表。第二、三个参数为可选参数。,第12页,10.2.3持续监视位置信息,使用watchPosition方法可以持续获取用户的当地地理位置信息，它会定期地自动获取。watchPosition方法的使用格式如下：intwatchCurrentPosition(onSuccess,onError,options);该方法参数的说明和使用与getCurrentPosition方法相同。调用该方法后会返回一个数字，这个数字的用法与JavaScript脚本中setInterval方法的返回值用法类似，可以被clearWatch方法使用，以停止对当前地理位置信息的监视。,第13页,10.2.4停止获取位置信息,使用clearWatch方法可以停止对当前用户的地理位置信息的监视，使用格式如下：voidclearWatch(watchId);参数watchId为调用watchCurrentPosition方法监视地理位置信息时的返回参数。,第14页,10.2.5隐私保护,Geolocation规范提供了一套保护用户隐私的机制。除非得到用户明确许可，否则不可获得位置信息。,第15页,10.2.6处理位置信息,因为位置数据属于敏感信息，所以接收到之后，必须小心地处理、存储和重传。如果用户没有授权存储这些数据，那么应用程序应该在相应任务完成后立即删除它。如果要重传位置数据，建议先对其进行加密。在手机地理定位数据时，应用程序应该着重提示用户以下内容：会收集位置数据；为什么收集位置数据；位置数据将保存多久；怎样保证数据的安全；位置数据怎样共享，如果同意则共享；用户怎样检查和更新它们的位置数据。,第16页,10.2.7position对象,如果获取地理位置信息成功，则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。position对象具有以下这些属性：latitude：当前地理位置的纬度。lngitude：当前地理位置的经度。altitude：当前海拔位置的高度，不能获取时值为null。accuracy：获取到的纬度和经度的精度。altitudeAccurancy：获取到的海拔高度的精度。heading：设备的前进方向。用面朝正北方向的顺时针旋转角度来表示。speed：设备的前进速度。timestamp：获取地理位置信息时的时间。,第17页,主要内容,10.1GeolocationAPI的基本知识10.2使用GeolocationAPI10.3案例实战10.4本章小结,第18页,10.3案例实战,10.3.1使用Google地图10.3.2计步器,第19页,主要内容,10.1GeolocationAPI的基本知识10.2使用GeolocationAPI10.3案例实战10.4本章小结,第20页,10.4本章小结,GeolocationAPI允许用户在Web应用程序中共享位置信息，使得用户能够享受位置感知服务。本章介绍Geolocation位置信息的来源：