代码改变世界

HTML5新功能之二 《Geolocation获取地理位置》

2014-02-07 11:38  臭小子1983  阅读(453)  评论(0)  编辑  收藏  举报

获取地理位置

一、定位原理

IP地址、GPS、wifi、GSM/CDMA

1、PC端定位的方式：是通过IP地址、wifi来进行定位。

2、导航：通过GPS来位置定位

3、手机定位：通过GSM、CDMA、3G

 

二、geolocation属性和方法

　　1、 getCurrentPosition(获取成功调用的参数返回的是一个对象的信息， 获取失败调用的参数， 选项设置对象)：获取当前地理信息

　　2、 wacthPosition()：监视当前地理位置

　　3、 clearWacth()：清除当前地理信息

 

　　getCurrentPosition属性：

　　error对象：

　　1、code属性：返回1（用户拒绝了位置服务）2（获取不到位置信息）3（获取信息超时错误）;

　　2、message属性：为一个字符串，包含错误信息

　　

　　第三个参数可选参数：

　　1、enableHeghAccuracy：是否要求高精度的地理位置信息

　　2、timeout：对地理位置信息的获取操作一个超时限制

　　3、maximumAge：对地理位置信息进行缓存的有效时间

 

 1 navigator.geolocation.getCurrentPosition(
 2         function(position){
 3             // 获取地理位置信息成功时所处理
 4         },
 5         function(error){
 6             // 获取地理位置信息失败时所做处理
 7         },
 8         {
 9             // 设置缓存有效时间为2分钟
10             maximumAge : 60*1000*2,
11             // 5秒内未获取到地理位置则返回错误 
12             timeout : 5000
13         }
14 )

 

三、position对象

　　获取地理位置成功，可以在获取成功后回调函数的参数访问position对象来得到这些地理位置

　　position属性

　　1、latitude：当前地理位置的纬度

　　2、longitude：当前地理位置的经度

　　3、altitude：海拔高度，不能获取时为null

　　4、accuracy：获取纬度或经度的精度，以米为单位

　　5、altitudeAccurancy：获取海拔高度的精度（以米为单位）

　　6、heading：设备的前进方向，

　　7、speed：设备的前进速度，以米/秒为单位

　　8、timestamp：获取地理位置信息的时间

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6     <style type="text/css">
 7         html {height: auto;}
 8         body {height: auto;margin: 0;padding: 0;}
 9         #map_canvas {width:1000px;height: 500px;position: absolute;}
10         @media print {#map_canvas {height: 950px;}}
11     </style>
12 </head>
13 
14 <body>
15 <div id="map_canvas"></div>
16 
17 <script src="../js/jquery-1.7.2.min.js"></script>
18 <script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
19 <script>
20     // alert(navigator.geolocation);
21     function successFun(position){
22         console.log("地理位置是："+position.coords.latitude+"，"+position.coords.longitude+"，"+position.coords.altitude);
23         /* */
24         var myLatlng = new sogou.maps.LatLng(position.coords.latitude, position.coords.longitude);
25         var myOptions = {
26             zoom: 15,
27             center: myLatlng,
28             mapTypeId: sogou.maps.MapTypeId.ROADMAP
29         }
30         var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
31 
32         var marker = new sogou.maps.Marker({
33             position: myLatlng,
34             map: map,
35             //指定样式id，以使用系统样式或者用StyleLib类预加载的样式。
36             //系统样式id有：S1980、S1890、S1891、S1892、S1893、S1894、S1895、S1896、S1897、S1898、S1899。
37             styleId:"S1897"
38         });
39 
40     }
41 
42     function errorFun(error){
43         // console.log(error.message); // 错误信息
44         // console.log(error.code);    // 错误码
45 
46         switch(error.code){
47             case 1:
48                 alert("用户拒绝了位置服务");
49                 break;
50             case 2:
51                 alert("获取不到位置信息");
52                 break;
53             case 3:
54                 alert("获取信息超时错误");
55                 break;
56         }
57     }
58 
59     // 创建geolocation对象
60     function createGeolocation(){
61         if(navigator.geolocation){  // 标准浏览器支持
62             navigator.geolocation.getCurrentPosition(successFun, errorFun,{
63                     // 设置缓存有效时间为2分钟
64                     maximumAge : 60*1000*2,
65                     // 5秒内未获取到地理位置则返回错误
66                     timeout : 10000
67             })
68         }
69         else{
70             alert("你使用的是非标准浏览器");
71         }
72     }
73 
74     createGeolocation();
75 </script>
76 </body>
77 </html>