第28课-HTML5地理位置定位API接口开发
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
navigator.geolocation.clearWatch(watchPositionId );
只针对移动设备
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5 + 百度地图 || 地理定位
Network Optimization Expert Team
② 定位成功后获取GPS坐标信息：经纬度
③ 将GPS坐标位置转换为GPS地理位置，并显示地图 ④ 将GPS坐标位置转换为百度坐标地理位置
Network Optimization Expert Team
初始化，测试浏览器是否支持地理位置定位
Network Optimization Expert Team
地理位置获取流程：
1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现： 1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。
getCurrentPosition(success,error,option)方法最多可以有三个参数： 第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数； 第二个参数用于捕获获取位置信息出错的情况， 第三个参数是配置项。
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
1.开发工具的安装与使用 安装phpStudy:该程序包集成最新的 Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+Zend Optimizer+Zend Loader，一次性安装，无须配置即可使用，是非常方便、 好用的PHP调试环境。该程序绿色小巧简易迷你仅有35M，有专门的控制面 板。
<script type="text/javascript"> ………… ………… </script>
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试
本案例中，一共有三个script脚本，前两个是直接调用百度的，第三个是自定义
Network Optimization Expert Team
调用百度地图
调用百度地图 中的地址解析
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试：自定义script脚本代码分解
① 初始化，测试浏览器是否支持地理位置定位
HTML5 地理位置定位 API 接口开发
内容摘要
① 地理位置定位原理与介绍 ② HTML5中地理位置定位的方法
③ HTML5中地理定位实例
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
地理位置定位原理与介绍
地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA
中文转码方式 网页标题
页面中的三个文本框
设置地图所在的显 示区域
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试
设置三个文本框的样式外观
在<head></head>标签之间插入CSS样式的代码，代码如下所示：
（第27讲） HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
navigator.geolocation.getCurrentPosition( function(p) { var map="维度"+p.coords.latitude+"经度"+p.coords.longitude; alert(var); });
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; } });
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition //当前位置 2、watchPosition //监视位置 3、clearWatch //清除监视
纬度 p.address.country p.address. region p.address.city
经度
accuracy 准确角 altitude 海拔高度 altitudeAcuracy 海拔高度的精确度 heading 行进方向 speed 地面的速度
国家 省份 城市
Network Optimization Expert Team
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
省略第一个,第二个参数
navigator.geolocation.getCurrentPosition( … , … , option); option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。 enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高 精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候， 浏览器会尝试启用这些设备，默认指为 true。
timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕 获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数
Network Optimization Expert Team
Baidu Nhomakorabea
HTML5 地理位置定位 API 接口开发
定位成功后获取GPS坐标信息：经纬度
Network Optimization Expert Team
将GPS坐标位置转换为GPS地理位置，并显示地图
Network Optimization Expert Team
将GPS坐标位置转换为百度坐标地理位置
Network Optimization Expert Team
HTML5中地理位置定位的方法
watchPosition像一个追踪器与clearWatch成对。 watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试 调用百度地图：在<head></head>标签之间插入<script>脚本，<script> 脚本的基本语法形式
使用外部<script>脚本 <script type="text/javascript" src="……"></script> 自定义<script>脚本
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
1. 关于 Geolocation 对象
Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐 私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是 “允许” or “拒绝”。 先看看哪些浏览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试 HTML语法格式 <html> <head> <title> </title> </head> <body>
</body> </html> 在Notepad++中编辑基本的 HTML代码
Network Optimization Expert Team
安装Notepad++:用于编辑HTML代码 安装支持定位服务的浏览器：如果电脑上的360浏览器无法支持，可以安装 所给素材中的google浏览器。
安装好后启动phpStudy服务，然后在浏览器中输入“http://localhost” 测试服务器是否配置成功。
Network Optimization Expert Team
地理位置获取失败的提示信息
Network Optimization Expert Team
只针对移动设备
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5 + 百度地图 || 地理定位
Network Optimization Expert Team
② 定位成功后获取GPS坐标信息：经纬度
③ 将GPS坐标位置转换为GPS地理位置，并显示地图 ④ 将GPS坐标位置转换为百度坐标地理位置
Network Optimization Expert Team
初始化，测试浏览器是否支持地理位置定位
Network Optimization Expert Team
地理位置获取流程：
1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现： 1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。
getCurrentPosition(success,error,option)方法最多可以有三个参数： 第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数； 第二个参数用于捕获获取位置信息出错的情况， 第三个参数是配置项。
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
1.开发工具的安装与使用 安装phpStudy:该程序包集成最新的 Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+Zend Optimizer+Zend Loader，一次性安装，无须配置即可使用，是非常方便、 好用的PHP调试环境。该程序绿色小巧简易迷你仅有35M，有专门的控制面 板。
<script type="text/javascript"> ………… ………… </script>
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试
本案例中，一共有三个script脚本，前两个是直接调用百度的，第三个是自定义
Network Optimization Expert Team
调用百度地图
调用百度地图 中的地址解析
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试：自定义script脚本代码分解
① 初始化，测试浏览器是否支持地理位置定位
HTML5 地理位置定位 API 接口开发
内容摘要
① 地理位置定位原理与介绍 ② HTML5中地理位置定位的方法
③ HTML5中地理定位实例
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
地理位置定位原理与介绍
地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA
中文转码方式 网页标题
页面中的三个文本框
设置地图所在的显 示区域
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试
设置三个文本框的样式外观
在<head></head>标签之间插入CSS样式的代码，代码如下所示：
（第27讲） HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
navigator.geolocation.getCurrentPosition( function(p) { var map="维度"+p.coords.latitude+"经度"+p.coords.longitude; alert(var); });
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; } });
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition //当前位置 2、watchPosition //监视位置 3、clearWatch //清除监视
纬度 p.address.country p.address. region p.address.city
经度
accuracy 准确角 altitude 海拔高度 altitudeAcuracy 海拔高度的精确度 heading 行进方向 speed 地面的速度
国家 省份 城市
Network Optimization Expert Team
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
省略第一个,第二个参数
navigator.geolocation.getCurrentPosition( … , … , option); option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。 enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高 精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候， 浏览器会尝试启用这些设备，默认指为 true。
timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕 获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数
Network Optimization Expert Team
Baidu Nhomakorabea
HTML5 地理位置定位 API 接口开发
定位成功后获取GPS坐标信息：经纬度
Network Optimization Expert Team
将GPS坐标位置转换为GPS地理位置，并显示地图
Network Optimization Expert Team
将GPS坐标位置转换为百度坐标地理位置
Network Optimization Expert Team
HTML5中地理位置定位的方法
watchPosition像一个追踪器与clearWatch成对。 watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试 调用百度地图：在<head></head>标签之间插入<script>脚本，<script> 脚本的基本语法形式
使用外部<script>脚本 <script type="text/javascript" src="……"></script> 自定义<script>脚本
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
Network Optimization Expert Team
HTML5 地理位置定位 API 接口开发
HTML5中地理位置定位的方法
1. 关于 Geolocation 对象
Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐 私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是 “允许” or “拒绝”。 先看看哪些浏览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
HTML5 地理位置定位 API 接口开发
HTML5中地理位置实例
2.代码编写与调试 HTML语法格式 <html> <head> <title> </title> </head> <body>
</body> </html> 在Notepad++中编辑基本的 HTML代码
Network Optimization Expert Team
安装Notepad++:用于编辑HTML代码 安装支持定位服务的浏览器：如果电脑上的360浏览器无法支持，可以安装 所给素材中的google浏览器。
安装好后启动phpStudy服务，然后在浏览器中输入“http://localhost” 测试服务器是否配置成功。
Network Optimization Expert Team
地理位置获取失败的提示信息
Network Optimization Expert Team