课HTML5地理位置定位API接口开课件

1、Network Optimization Expert Team 内容摘要 地理位置定位原理与介绍 HTML5中地理位置定位的方法 主讲：主讲：张恩民张恩民 官网：官网： （第28讲） HTML5 地理位置定位 API 接口开发 Network Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 地理位置定位原理与介绍地理位置定位原理与介绍 地理位置定位的几种方式：地理位置定位的几种方式：IP地址，地址，GPS，Wifi，GSM/CDMA 地理位置获取流程：地理位置获取流程： 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请

2、求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现：地理地位的实现： 1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。 Network Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 Network O

3、ptimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 HTML5中地理位置定位的方法中地理位置定位的方法 关于 Geolocation 对象 Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私 安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允允 许许” or “拒绝拒绝”。 先看看哪些浏览器支持先看看哪些浏览器支持Geolocation API：

4、IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+ Network Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 HTML5中地理位置定位的方法中地理位置定位的方法 getCurrentPosition(success,error,option)方法最多可以有三个参数： 第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数； 第二个参数用于捕获获取位置信息出错的情况， 第三个参数是配置项。 GeolocationAPI存在于naviga

5、tor对象中，只包含3个方法： 1、getCurrentPosition/当前位置 2、watchPosition/监视位置 3、clearWatch/清除监视 Network Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 HTML5中地理位置定位的方法中地理位置定位的方法 navigator.geolocation.getCurrentPosition( function(p) var map=维度+p.coords.latitude+经度+p.coords.longitude; alert(var); ); p.address.

6、country p.address.region p.address.city 纬度纬度 经度经度 国家国家 省份省份 城市城市 accuracy准确角 altitude海拔高度 altitudeAcuracy海拔高度的精确度 heading行进方向 speed地面的速度 Network Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 HTML5中地理位置定位的方法中地理位置定位的方法 navigator.geolocation.getCurrentPosition(,function(error) switch(error.code

7、) caseerror.TIMEOUT: alert(连接超时，请重试); break; caseerror.PERMISSION_DENIED: alert(您拒绝了使用位置共享服务，查询已取消); break; caseerror.POSITION_UNAVAILABLE: alert(，抱歉，暂时无法为您所在的星球提供位置服务); break; ); 省略第一个参数省略第一个参数 Network Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 HTML5中地理位置定位的方法中地理位置定位的方法 navigator.geoloca

8、tion.getCurrentPosition(,option); option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。 enableHighAccuracy，它将告诉浏览器是否启用高精度设备，所谓的高 精度设备包含但不局限于前面所提到的GPS和WIFI，值为true的时候， 浏览器会尝试启用这些设备，默认指为true。 timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕 获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用getCurrentPosition时传递的参数 省略第一个省略第一个,第二个参数第二个参数 Netwo

9、rk Optimization Expert Team （第27讲） HTML5 地理位置定位 API 接口开发 HTML5中地理位置定位的方法中地理位置定位的方法 watchPosition像一个追踪器与clearWatch成对。 watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。 varwatchPositionId= navigator.geolocation.watchPosition(success_callback,error_callback, options); navigator.geolocation.clearWatch(watchPositionId); 只针对移动设备只针对移动设备 Network Optimization E