`

HTML5 Geolocation API的使用方法及实现原理

 
阅读更多
百度地图
百度地图为什么不支持输入经纬度来搜索? http://www.zhihu.com/question/24881720
百度坐标查询: http://api.map.baidu.com/lbsapi/getpoint/
百度地图坐标转换APIhttp://developer.baidu.com/map/changeposition.htm
百度地图API详解之坐标系转换 http://www.cnblogs.com/jz1108/archive/2011/10/11/2207245.html
百度地图示例 http://developer.baidu.com/map/jsdemo.htm#a1_2



参数以及意义参考: http://www.haorooms.com/post/html5_GPS_getCurrentPosition

原文:http://xbingoz.com/152.html
在HTML5中,geolocation作为navigator的一个属性出现,它本身是一个对象,拥有三个方法:

- getCurrentPosition

- watchPosition

- clearWatch


具体用法如下:
//判断浏览器是否支持geolocation
if(navigator.geolocation){
     // getCurrentPosition支持三个参数
     // getSuccess是执行成功的回调函数
     // getError是失败的回调函数
     // getOptions是一个对象,用于设置getCurrentPosition的参数
     // 后两个不是必要参数
     var getOptions = {
          //是否使用高精度设备,如GPS。默认是true
          enableHighAccuracy:true,
          //超时时间,单位毫秒,默认为0
          timeout:5000,
          //使用设置时间内的缓存数据,单位毫秒
          //默认为0,即始终请求新数据
          //如设为Infinity,则始终使用缓存数据
          maximumAge:0
     };
 
     navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);
 
     //成功回调
     function getSuccess(position){
          // getCurrentPosition执行成功后,会把getSuccess传一个position对象
          // position有两个属性,coords和timeStamp
          // timeStamp表示地理数据创建的时间??????
          // coords是一个对象,包含了地理位置数据
          console.log(position.timeStamp);   
 
          // 估算的纬度
          console.log(position.coords.latitude);    
          // 估算的经度
          console.log(position.coords.longitude);    
          // 估算的高度 (以米为单位的海拔值)
          console.log(position.coords.altitude);    
          // 所得经度和纬度的估算精度,以米为单位
          console.log(position.coords.accuracy);    
          // 所得高度的估算精度,以米为单位
          console.log(position.coords.altitudeAccuracy);    
          // 宿主设备的当前移动方向,以度为单位,相对于正北方向顺时针方向计算
          console.log(position.coords.heading);
          // 设备的当前对地速度,以米/秒为单位    
          console.log(position.coords.speed);    
          // 除上述结果外,Firefox还提供了另外一个属性address
          if(position.address){
               //通过address,可以获得国家、省份、城市
               console.log(position.address.country);
               console.log(position.address.province);
               console.log(position.address.city);
          }
     }
     //失败回调
     function getError(error){
          // 执行失败的回调函数,会接受一个error对象作为参数
          // error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE
          // 执行失败时,code属性会指向三个常量中的一个,从而指明错误原因
          switch(error.code){
               case error.TIMEOUT:
                    console.log('超时');
                    break;
               case error.PERMISSION_DENIED:
                    console.log('用户拒绝提供地理位置');
                    break;
               case error.POSITION_UNAVAILABLE:
                    console.log('地理位置不可用');
                    break;
               default:
                    break;
          }
     }
     // watchPosition方法一样可以设置三个参数
     // 使用方法和getCurrentPosition方法一致,只是执行效果不同。
     // getCurrentPosition只执行一次
     // watchPosition只要设备位置发生变化,就会执行
     var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
     //clearwatch用于终止watchPosition方法
     clearWatch(watcher_id);         
}

geolocation的使用方法并不复杂,但是其实现原理比较有意思。
分享到:
评论

相关推荐

    基于HTML5_Geolocation_考勤管理系统.doc

    通过软件工程原理,对这个系统进行需求分析、设计、代码实现和测试,并介绍了基于HTML5 Geolocation API的考勤管理系统软件的设计、实现和各个过程中存在的问题与解决方法。 知识点5: 考勤管理系统的需求分析 在...

    HTML 5基础之HTML 5 API的威力

    ##### 4.2 Geolocation API原理 - **全局对象**:`navigator.geolocation`是获取地理位置信息的主要入口。 - **位置信息获取**:可以通过调用`getCurrentPosition()`、`watchPosition()`和`clearWatch()`等方法来...

    geolocation 根据地理坐标获取具体位置信息

    下面将详细阐述`geolocation` API的工作原理、使用方法以及相关应用。 `geolocation` API 的核心在于获取用户的位置信息,这通常包括经度、纬度和海拔高度。这些数据可以通过多种方式获取,如GPS、Wi-Fi信号强度、...

    21 - Geolocation.rar

    首先,Geolocation API是HTML5的一个新增特性,它提供了一种标准化的方法来获取设备(通常是指浏览器所在的设备)的地理位置信息,如经度、纬度和海拔高度等。API通过navigator.geolocation对象在JavaScript中暴露...

    HTML5 调用百度地图API地理定位.pdf

    本例展示了如何使用HTML5 Geolocation API与百度地图API相结合,实现在网页上显示用户的当前位置。下面将详细介绍其实现过程: 1. **引入百度地图API**: - 在`<head>`部分通过`<script>`标签引入百度地图API:`...

    geolocation

    在Web开发中,`navigator.geolocation`是HTML5引入的一个API,允许网页获取用户的地理位置。通过调用这个API,开发者可以请求访问用户的位置信息,并在用户同意后得到经纬度坐标。以下是一个简单的示例: ```...

    Android使用_HTML_5地理定位_API.pptx

    在Android平台上实现HTML5地理定位功能,首先需要理解地理定位API的基本工作原理,同时掌握如何处理地理位置信息及其可能引发的安全问题。 - **先决条件**:确保目标设备支持HTML5地理定位API,且用户已授权应用...

    HTML5高级程序设计

    本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、...

    HTML5地理位置定位

    - **JavaScript代码实现**:通过简单的JavaScript代码调用Geolocation API,可以从用户的浏览器中收集位置信息。 - **位置权限请求**:在使用地理位置服务之前,必须向用户请求位置访问权限。 - **处理位置信息**:...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。...

    geolocation:浏览器 HTML5 JS 地理定位演示

    这个“geolocation:浏览器 HTML5 JS 地理定位演示”是针对JavaScript编程语言的一个示例项目,旨在帮助开发者理解和实践如何在浏览器环境中使用HTML5的Geolocation API。 JavaScript作为Web开发的主流脚本语言,其...

    安卓与JS交互原理手势密码实现原理

    需要注意的是,为了安全起见,被暴露的方法应该被`@JavascriptInterface`注解标记,否则在Android 4.2及以上版本中,这些方法不会被调用。 3. **WebViewClient**:`WebViewClient`是一个接口,它的子类可以监听和...

    HTML5程序设计源码

    通过分析这个"HTML5程序设计源码"压缩包,你可以学习到如何在实践中应用这些HTML5特性,理解它们的工作原理,并且可能还会发现一些创新的实现方式。这将有助于提升你的前端开发技能,使你能创建更具吸引力和交互性的...

    HTML5程序设计-3期(KC014) 单元设计_单元6 HTML5地理定位.doc

    在教学过程中,采用案例分析、操作演示和课堂实践等方式,鼓励学生动手操作,理解和掌握HTML5 Geolocation API的使用。通过课后作业,学生将进一步巩固所学,实现更复杂的位置更新功能。 总的来说,这个单元旨在使...

    javaScript api

    5. 浏览器特定API:除了标准的JavaScript API,各浏览器厂商还提供了各自的扩展API,如Chrome的`chrome.*`系列API,用于实现浏览器扩展功能;Firefox的`browser.*`API,用于Firefox WebExtensions等。 6. ES6及以后...

    HTML5 移动开发即学即用 PDF版本下载.txt

    本书详细阐述了如何使用HTML5提供的Geolocation API获取当前位置信息,并结合Google Maps API等第三方服务绘制地图、添加标记点等操作。 ### WebSockets实时通信技术 针对传统HTTP请求模式下难以实现实时双向数据...

    HTML5技术分享(原理和参考说明)

    HTML5的API是其核心组成部分之一,包括Geolocation(地理位置)、WebSocket(双向通信)、Canvas(画布)和Web Storage(本地存储)等。这些API极大地扩展了HTML的能力,让开发者可以构建出具有更多交互性和实时性的...

    HTML5教学PPT

    第08章《HTML5离线应用及地理位置应用》介绍了离线应用的原理,如离线manifest文件的使用,以及如何通过Geolocation API获取用户的地理位置信息,实现地理位置相关的服务。 第09章和第10章则专注于CSS3的学习,包括...

Global site tag (gtag.js) - Google Analytics