《第28课-html5地理位置定位api接口开发》由会员分享，可在线阅读，更多相关《第28课-html5地理位置定位api接口开发（23页珍藏版）》请在金锄头文库上搜索。
1、内容摘要,地理位置定位原理与介绍 HTML5中地理位置定位的方法 HTML5中地理定位实例,HTML5 地理位置定位 API 接口开发,HTML5 地理位置定位 API 接口开发,地理位置定位原理与介绍,地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA 地理位置获取流程： 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现： 1. 实现基于浏览器（无需后端支持）获
2、取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。,HTML5 地理位置定位 API 接口开发,HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,关于 Geolocation 对象,Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。 先看看哪些浏览器支持Geolocation API： I
3、E9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+,HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,getCurrentPosition(success,error,option)方法最多可以有三个参数： 第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数； 第二个参数用于捕获获取位置信息出错的情况， 第三个参数是配置项。,Geolocation API存在于navigator对象中，只包含3个方法： 1、getCurrentPosition /当前位置 2、watch
4、Position /监视位置 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,纬度,经度,国家,省份,城市,accuracy 准确角 altitude 海拔高度 alt
5、itudeAcuracy 海拔高度的精确度 heading 行进方向 speed 地面的速度,HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition( , function(error) switch(error.code) case error.TIMEOUT : alert( “ 连接超时，请重试 “ ); break; case error.PERMISSION_DENIED : alert( “ 您拒绝了使用位置共享服务，查询已取消 “ ); break; case error.POS
6、ITION_UNAVAILABLE : alert( “ ，抱歉，暂时无法为您所在的星球提供位置服务 “ ); break; );,省略第一个参数,HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,navigator.geolocation.getCurrentPosition( , , option); option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。 enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备
7、，默认指为 true。 timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数,省略第一个,第二个参数,HTML5 地理位置定位 API 接口开发,HTML5中地理位置定位的方法,watchPosition像一个追踪器与clearWatch成对。 watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。 var watchPositionId = navigator.geolocation.w
8、atchPosition(success_callback, error_callback, options); navigator.geolocation.clearWatch(watchPositionId );,只针对移动设备,HTML5 地理位置定位 API 接口开发,HTML5 + 百度地图 | 地理定位,HTML5 地理位置定位 API 接口开发,HTML5中地理位置实例,1.开发工具的安装与使用 安装phpStudy:该程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+Zend Optimizer+Zend Loader，一次性
9、安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序绿色小巧简易迷你仅有35M，有专门的控制面板。 安装好后启动phpStudy服务，然后在浏览器中输入“http:/localhost”测试服务器是否配置成功。 安装Notepad+:用于编辑HTML代码 安装支持定位服务的浏览器：如果电脑上的360浏览器无法支持，可以安装所给素材中的google浏览器。,HTML5 地理位置定位 API 接口开发,HTML5中地理位置实例,2.代码编写与调试 HTML语法格式 在Notepad+中编辑基本的 HTML代码,HTML5 地理位置定位 API 接口开发,HTML5中地理位置实例,2.代
10、码编写与调试 设置三个文本框的样式外观 在标签之间插入CSS样式的代码，代码如下所示：,HTML5 地理位置定位 API 接口开发,HTML5中地理位置实例,2.代码编写与调试 调用百度地图：在标签之间插入脚本，脚本的基本语法形式 使用外部脚本 自定义脚本 ,HTML5 地理位置定位 API 接口开发,HTML5中地理位置实例,2.代码编写与调试 本案例中，一共有三个script脚本，前两个是直接调用百度的，第三个是自定义,调用百度地图,调用百度地图中的地址解析,HTML5 地理位置定位 API 接口开发,HTML5中地理位置实例,2.代码编写与调试：自定义script脚本代码分解,初始化，测试浏览器是否支持地理位置定位 定位成功后获取GPS坐标信息：经纬度 将GPS坐标位置转换为GPS地理位置，并显示地图 将GPS坐标位置转换为百度坐标地理位置,初始化，测试浏览器是否支持地理位置定位,定位成功后获取GPS坐标信息：经纬度,将GPS坐标位置转换为GPS地理位置，并显示地图,将GPS坐标位置转换为百度坐标地理位置,地理位置获取失败的提示信息,
