HTML5 获取地理位置信息

  HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置。该Geolocation API可以应用于移动设备中的地理位置。

  • Geolocation API的基础知识

  在HTML5中,为window.navigator对象新增了一个geolocaation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在以下三个方法。

  1 .取得当前地理位置 getCurrentPositon(onsuccess,onError,options)

  其中第一个参数为获取当前地理位置信息成功时所执行的回调函数,第二个参数为获取当前地理位置信        息失败时所执行的回调函数,第三个参数为一些可选属性的列表。其中第二,第三个参数为可选属性。

  • 1.1 getCurrentPosition方法中的第一个参数为获取当前地理位置信息成功时所执行的回调函数。该参数的        使用方法如下。在获取地理位置信息成功时执行的回调函数中,用到了一个参数position,它代表一个position对象。

    navigator.geolocation.getCurrentPosition(function(position){

      //获取成功时的处理

    })

  • 1.2 getCurrentPosition方法中的第二个参数为获取当前地理位置信息失败时所执行的回调函数。该回调函        数使用一个error对象作为参考,该对象具有以下两个属性:

  code属性:用户拒绝了位置服务(属性值为1)

      获取不到位置信息(属性值为2)

       获取信息超时错误(属性值为3)

      message属性:message属性为一个字符串,在该字符串中包含了错误信息,这个错误在开发和调试时              将很有用。

  在getCurrentPosition方法中使用第二个参数来捕获错误信息的具体使用方法如下: 

 1 navigator.geolocation.getCurrentPosition(function(position){
 2    var coords = position.coords;
 3    showMap(coords.latitude,coords.longitude,coords.accuracy);  
 4 },
 5    //捕获错误信息
 6    function(error){
 7       var errorTypes = {
 8         1:'位置服务被拒绝',
 9         2:'获取不到位置信息',
10         3:'获取信息超时',
11       };
12       alert(errorTypes[error.code] + ": 不能确定你的当前地理位置");
13    }
14 )

 

  • 1.3 getCurrentPosition方法中的第三个参数可以省略,它是一些可选属性的列表,这些可选属性如下:

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

  timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒)

  maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)

  对于这些可选属性的具体位置方法如下:

 1 navigator.geolocation.getCurrentPositon(function(position){
 2 },
 3 function(error){
 4 },
 5 //以下为可选属性
 6 {
 7    //设置缓存有效时间为2分钟
 8    maximumAge:60*1000*2,
 9   //5秒钟内未获取到地理位置信息则返回错误
10   timeout:5000      
11 )

  2.持续监视当前地理位置的信息 watchCurrentPositon(onsuccess,onError,options)

  该方法三个参数的说明与使用方法和getCurrentPosition方法的参数说明与使用方法相同。该方法返回一个数字,这个数字的使用方法与Javascript脚本中setInterval方法的返回参数的使用方法类似,可以被clearWath方法使用,停止对当前地理位置信息的监视。

  3.停止获取当前用户的地理位置信息 clearWatch(watchId)

  使用该方法可以停止对当前用户的地理信息的监视。该方法的参数为调用watchCurrentPosition方法监视地理位置信息时的返回参数。

  • position对象

   如果获取地理位置信息成功,则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。position对象具有如下这些属性:

  latitude:当前地理位置的纬度。

  longitude:当前地理位置的经度。

  altitude:当前地理位置的海拔高度(不能获取时为null)

  accuracy:获取到的纬度或经度的精度

  altitudeAccuracy:获取到的海拔高度的精度

  heading:设备的前进方面。用面朝正北方向的顺时针旋转角度来表示(不能获取时为null)

  speed:设备的前进速度

  timestamp:获取地理位置信息时的时间。

     下面用getCurrentPositon方法获取当前位置的地理信息

  

 1  function showObject(obj, k) {
 2         //递归显示object
 3         if (!obj) {
 4             return;
 5         }
 6         for (var i in obj) {
 7             if (typeof(obj[i]) != "object" || obj[i] == null) {
 8                 for (var j = 0; j < k; j++){
 9                     document.write('&nbsp;&nbsp;&nbsp;&nbsp;');
10                 }
11                 document.write(i + " : " + obj[i] + "<br />");
12             } else {
13                 document.write(i + " : " + "<br />");
14                 showObject(obj[i],k+1);
15             }
16         }
17     }
18     function get_location(){
19         if(navigator.geolocation){
20             navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:1000})
21         } else {
22             alert('你的浏览器不支持使用HTML 5来获取地理位置信息。');
23         }
24     }
25 
26     function handle_error(err){
27         //错误处理
28         switch(err.code){
29             case 1:
30                 alert('位置服务被拒绝');
31                 break;
32             case 2:
33                 alert('暂时获取不到位置信息');
34                 break;
35             case 3:
36                 alert('获取信息超时');
37                 break;
38             default:
39                 alert('未知错误');
40                 break;
41         }
42     }
43 
44     function show_map(position){
45         //显示地理信息
46         var latitude = position.coords.latitude;
47         var longititude = position.coords.longititude;
48         showObject(position,0);
49     }
50 
51     get_location();
posted @ 2016-08-30 14:23  Busy  阅读(550)  评论(0编辑  收藏  举报