课HTML5地理位置定位API接口开发.ppt

内容摘要,地理位置定位原理与介绍HTML5中地理位置定位的方法,主讲：张恩民官网：,（第28讲）HTML5地理位置定位API接口开发,（第27讲）HTML5地理位置定位API接口开发,地理位置定位原理与介绍,地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA地理位置获取流程：1、用户打开需要获取地理位置的web应用。2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。3、假设用户允许，浏览器从设别查询相关信息。4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。HTML5地理地位的实现：1.实现基于浏览器（无需后端支持）获取用户的地理位置技术2.精确定位用户的地理位置(精度最高达10m之内，依赖设备)3.持续追踪用户的地理位置4.与GoogleMap、或者BaiduMap交互呈现位置信息。,（第27讲）HTML5地理位置定位API接口开发,（第27讲）HTML5地理位置定位API接口开发,HTML5中地理位置定位的方法,关于Geolocation对象,GeolocationAPI用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”or“拒绝”。先看看哪些浏览器支持GeolocationAPI：IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+,（第27讲）HTML5地理位置定位API接口开发,HTML5中地理位置定位的方法,getCurrentPosition(success,error,option)方法最多可以有三个参数：第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；第二个参数用于捕获获取位置信息出错的情况，第三个参数是配置项。,GeolocationAPI存在于navigator对象中，只包含3个方法：1、getCurrentPosition/当前位置2、watchPosition/监视位置3、clearWatch/清除监视,（第27讲）HTML5地理位置定位API接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition(function(p)varmap=维度+p.coords.latitude+经度+p.coords.longitude;alert(var););,p.address.countryp.address.regionp.address.city,纬度,经度,国家,省份,城市,accuracy准确角altitude海拔高度altitudeAcuracy海拔高度的精确度heading行进方向speed地面的速度,（第27讲）HTML5地理位置定位API接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition(,function(error)switch(error.code)caseerror.TIMEOUT:alert(连接超时，请重试);break;caseerror.PERMISSION_DENIED:alert(您拒绝了使用位置共享服务，查询已取消);break;caseerror.POSITION_UNAVAILABLE:alert(，抱歉，暂时无法为您所在的星球提供位置服务);break;);,省略第一个参数,（第27讲）HTML5地理位置定位API接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition(,option);option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。enableHighAccuracy，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的GPS和WIFI，值为true的时候，浏览器会尝试启用这些设备，默认指为true。timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。这样我们尝试修改调用getCurrentPosition时传递的参数,省略第一个,第二个参数,（第27讲）HTML5地理位置定位API接口开发,HTML5中地理位置定位的方法,watchPosition像一个追踪器与clearWatch成对。watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。varwatchPositionId=navigator.geolocation.watchPosition(success_callback,error_callback,options);navigator.geolocation.clearWatch(watchPositionId);,只针对移动设备,（第27讲）HTML5地理位置定位API接口开发,HTML5+百度地图|地理定位,感谢收看本次教程欢迎访问:,（第27讲）HTML5地理位置定位API接口开发,