关于HTML5 地理位置geolocation API 的一些事

大学毕业,到进入这个行业也已经有5个多月了,接触HTML5 Webapp开发也有5个多月了,趁着周末写一些关于在开发过程中使用HTML5 Geolocation API的一些心得。

一、浏览器支持

  Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).

   移动端:Android 2.0+,iPhone 3.0+,Opera Mobile 10.1+,Symbian,Blackberry OS 6,Maemo

  这是我入行大半年感觉最为头疼的,各个不同版本浏览器的兼容性。

二、getCurrentPosition(获取当前位置的GPS信息)

  语法:window.navigator.getCurrentPosition(successfulCallback,failCallback,options)

       successfulCallback : 成功获取到GPS定位信息之后的回调函数;

                 返回一个对象position,包含coords.latitude(纬度),coords.longitude(经度),以及accuracy 属性

failCallback : 获取GPS失败之后的回调函数;

              返回一个对象:PERMISSION_DENIED(用户拒绝对获取地理位置的请求);

                   POSITION_UNAVAILABLE(位置信息是不可用的)

                   TIMEOUT(请求用户地理位置超时);

                   UNKNOWN_ERROR(未知错误)

       options :  这是一个可选参数;

          enableHighAccuracy: 是否要求高精度的地理位置信息

          timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒),如果在该时间内未获取到地理位置信息,则返回错误

           maximumAge: 对地理位置进行缓存的有效时间(单位为毫秒) ;例如缓存事件为2min 那么在9点中获取的GPS信息,在9:01再次获取时会返回9点获取的GPS信息;

  Demo代码如下:

    function getPosition(){

        //判断浏览器是否支持HTML5 定位

      if(window.navigator.geolocation){

        navigator.geolocation.getCurrentPosition(successfulCallback,failCallback,options)

      }else{

           alert("你的浏览器不能使用HTML5定位")

         }

     }

    function successfulCallback(position){

      var latitude = position.coords.latitude;

      var longitude = position.coords.longitude;

    }

    function failCallback(error){

      var text ;

      switch(error.code){

        case error.PERMISSION_DENIED:

        text ="用户拒绝对获取地理位置的请求。";

         break;
            case error.POSITION_UNAVAILABLE:

          text ="位置信息是不可用的。";

        break;

        case error.TIMEOUT:

        text ="请求用户地理位置超时。";

         break;

        case error.UNKNOWN_ERROR:

         text ="未知错误。";

        break;
          }

      }

    }

三、watchPosition (跟踪用户不断的获取GPS),clearWatch(解除跟踪)

  语法:var watchID = window.navigator.watchPosition(successfulCallback);

     window.navigator.geolocation.clearWatch(watchID);

    

四、小结

  使用HTML5 geolocation API 并且结合了百度地图 \Google地图\高德地图也做了不少的开发,其中遇到了一个最坑爹的问题,就是一台测试手机的GPS获取超级慢,有的时候还能获取失败,但是

     在使用getCurrentPosition方法的时候一开始并没有在options中指定timeout ,然后导致了手机一直在获取GPS,根本进不去任何的回调函数,害的我对代码产生了质疑。

  

时间: 2024-08-24 20:51:38

关于HTML5 地理位置geolocation API 的一些事的相关文章

地理位置(Geolocation)API 简介

一.开篇简述 Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法.且目前看来浏览器的支持情况还算不错(因为新版本的IE支持了该API),这使得在不久之后就可以使用这一浏览器内置的API了.该API接口提供的用户地理位置信息还算蛮详细的,经纬度啊,海拔啊,精确度,移动速度啊都是可以获取的. 据我个人的了解,其位置的获取是通过收集用户周围的无线热点和您 PC 的 IP 地址.然后浏览器把这些信息发送给默认的位置定位服务提供者,也就是谷歌位置服务,由它

HTML5 地理位置定位API(2)

HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Internet Explorer 9.0+ 手机支持情况: Android 2.0+iPhone 3.0+Opera Mobile 10.1+Symbian (S60 3rd & 5th generation)Blackberry OS 6Maemo 检测浏览器是否支持: if (navigator.geol

使用html5的Geolocation API实现定位

公司有个需求,需要获取用户的位置,所以看了下html5的Geolocation 这个新东西,发现挺好用的. <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> <button onclick="getLocation()">试一下</button> <script> var x=document.ge

HTML5 地理位置定位API(3)

HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了html5获取地理定位的方法,分享给大家供大家参考.具体方法如下: html5 获取坐标代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>test1.html</title> <meta

HTML5 地理位置定位API(4)

地理定位(geolocation)是最令人兴奋,而且得到了广泛支持的一个新API.通过这套API, JavaScript代码能够访问到用户的 当前位置信息.当然,访问之前必须得到用户的明确许可,即同意在页面共享其位置信息. 如果页面尝试访问其地理定位信息,浏览器就会显示一个对话框,请求用 户许可共享其位置信息. Geolocation API在浏览器中的实现是navigator.geolocation对象,这个对象包含3个方法.第一个是getCurrentPosition(), 调用这个方法就会

html5 geolocation API

清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, optional handleLocationError, optional options); 清单 3. updateLocation() 函数使用示例updateLocation() 函数是getCurrentPosition的必选参数,也是浏览器指明位置数据可用时应调用的函数.获取位置操作可能需

HTML5 地理位置定位(HTML5 Geolocation)原理及应用

地理位置(Geolocation)是 HTML5 的重要特性之中的一个,提供了确定用户位置的功能,借助这个特性可以开发基于位置信息的应用. 今天这篇文章向大家介绍一下HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况. 在訪问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,假设您同意 Chrome 浏览器与站点共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,预计您所在的位置. 然后,浏览器会与请求使用您位置的站点共享您的位

HTML5 Geolocation API精确性[转载]

大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小伙伴在哪儿)中,发现用PC获取的地理位置与手机端获取的地理信息存在微小的差距,PC端会经常出现获取不到地理位置的情况,PC端和手机端的Geolocation是否有什么底层实现方面的差别呢,HTML5又是根据什么原则来确定应该采用何种方式来确定经度和纬度信息呢? 带着这个问题,作者查阅了一些资料,得出

html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位:为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象中的geolocation属性有三个方法如下: 第一个方法是:getCurrentPosition 该方法来取得