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

1、内容摘要,地理位置定位原理与介绍 HTML5中地理位置定位的方法,主讲：张恩民 官网：,（第28讲） HTML5 地理位置定位 API 接口开发,（第27讲） HTML5 地理位置定位 API 接口开发,地理位置定位原理与介绍,地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA 地理位置获取流程： 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现：1. 实现基于浏

2、览器（无需后端支持）获取用户的地理位置技术2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 )3. 持续追踪用户的地理位置4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。,（第27讲） HTML5 地理位置定位 API 接口开发,（第27讲） HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,关于 Geolocation 对象,Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。 先看看哪些浏

3、览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+,（第27讲） HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,getCurrentPosition(success,error,option)方法最多可以有三个参数： 第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数； 第二个参数用于捕获获取位置信息出错的情况， 第三个参数是配置项。,Geolocation API存在于navigator对象中，只包含3个方法： 1、get

4、CurrentPosition /当前位置 2、watchPosition /监视位置 3、clearWatch /清除监视,（第27讲） HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition( function(p) var map=维度+p.coords.latitude+经度+p.coords.longitude; alert(var); );,p.address.country p.address. region p.address.city,纬度,经度,国家,省份,城市,accur

5、acy 准确角 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

6、; caseerror.POSITION_UNAVAILABLE: alert(，抱歉，暂时无法为您所在的星球提供位置服务); break; );,省略第一个参数,（第27讲） HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition( , , option); option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。 enableHighAccuracy，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时

7、候，浏览器会尝试启用这些设备，默认指为 true。 timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。这样我们尝试修改调用 getCurrentPosition 时传递的参数,省略第一个,第二个参数,（第27讲） HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,watchPosition像一个追踪器与clearWatch成对。 watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。 var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options); navigator.geolocation.clearWatch(watch