第28课-HTML5地理位置定位API接口开发课件_第1页
第28课-HTML5地理位置定位API接口开发课件_第2页
第28课-HTML5地理位置定位API接口开发课件_第3页
第28课-HTML5地理位置定位API接口开发课件_第4页
第28课-HTML5地理位置定位API接口开发课件_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

内容摘要地理位置定位原理与介绍HTML5中地理位置定位的方法HTML5中地理定位实例

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

HTML5地理位置定位API接口开发地理位置定位原理与介绍

地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA地理位置获取流程：1、用户打开需要获取地理位置的web应用。2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。3、假设用户允许，浏览器从设别查询相关信息。4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。HTML5地理地位的实现：

1.实现基于浏览器（无需后端支持）获取用户的地理位置技术

2.精确定位用户的地理位置(精度最高达10m之内，依赖设备)

3.持续追踪用户的地理位置

4.与GoogleMap、或者BaiduMap交互呈现位置信息。

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

HTML5地理位置定位API接口开发HTML5中地理位置定位的方法

关于Geolocation对象

GeolocationAPI用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”or“拒绝”。先看看哪些浏览器支持GeolocationAPI：IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+

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地面的速度

HTML5地理位置定位API接口开发HTML5中地理位置定位的方法navigator.geolocation.getCurrentPosition(…,function(error){switch(error.code){

case

error.TIMEOUT

:

alert(

"

连接超时，请重试

"

);

break;

case

error.PERMISSION_DENIED

:

alert(

"

您拒绝了使用位置共享服务，查询已取消

"

);

break;

case

error.POSITION_UNAVAILABLE

:

alert(

"

，抱歉，暂时无法为您所在的星球提供位置服务

"

);

break;

}

});

省略第一个参数

HTML5地理位置定位API接口开发HTML5中地理位置定位的方法navigator.geolocation.getCurrentPosition(…,…,option);option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。

enableHighAccuracy

，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的GPS和WIFI，值为true的时候，浏览器会尝试启用这些设备，默认指为true。

timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。

这样我们尝试修改调用getCurrentPosition时传递的参数

省略第一个,第二个参数

HTML5地理位置定位API接口开发HTML5中地理位置定位的方法watchPosition像一个追踪器与clearWatch成对。watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。varwatchPositionId=navigator.geolocation.watchPosition(success_callback,error_callback,options);navigator.geolocation.clearWatch(watchPositionId);

只针对移动设备

HTML5地理位置定位API接口开发HTML5+百度地图||地理定位

HTML5地理位置定位API接口开发HTML5中地理位置实例1.开发工具的安装与使用安装phpStudy:该程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+ZendOptimizer+ZendLoader，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序绿色小巧简易迷你仅有35M，有专门的控制面板。安装好后启动phpStudy服务，然后在浏览器中输入“http://localhost”测试服务器是否配置成功。安装Notepad++:用于编辑HTML代码安装支持定位服务的浏览器：如果电脑上的360浏览器无法支持，可以安装所给素材中的google浏览器。

HTML5地理位置定位API接口开发HTML5中地理位置实例2.代码编写与调试HTML语法格式<html><head><title></title></head><body></body></html>在Notepad++中编辑基本的HTML代码

中文转码方式网页标题页面中的三个文本框设置地图所在的显示区域

HTML5地理位置定位API接口开发HTML5中地理位置实例2.代码编写与调试设置三个文本框的样式外观在<head></head>标签之间插入CSS样式的代码，代码如下所示：

HTML5地理位置定位API接口开发HTML5中地理位置实例2.代码编写与调试调用百度地图：在<head></head>标签之间插入<script>脚本，<script>脚本的基本语法形式使用外部<script>脚本<scripttype="text/javascript"src="……"></script>自定义<script>脚本<scripttype="text/javascript">……………………</script>

HTML5地理位置定位API接口开发HTML5中地理位置实例2.代码编写与调试本案例中，一共有三个script脚本，前两个是直接调用百度的，第三个是自定义调用百度地图调用百度地图中的地址解析

HTML5地理位置定位API接口开发HTML5中地理位置实例2.代码编写与调试：自定义script脚本代码分解初始化，测试浏览器是否支

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论