zoukankan      html  css  js  c++  java
  • HTML5新功能之二 《Geolocation获取地理位置》

    获取地理位置

    一、定位原理

    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 {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>
  • 相关阅读:
    谨以此文纪念一周的心血历程
    面向对象初调用:foolish 电梯
    洛谷 1016 旅行家的预算
    洛谷 1514 引水入城
    洛谷 3178 树上操作
    洛谷 3811 【模板】乘法逆元
    洛谷 1156 垃圾陷阱
    洛谷 1363 幻想迷宫
    洛谷 1736 创意吃鱼法
    洛谷 1436 棋盘分割
  • 原文地址:https://www.cnblogs.com/couxiaozi1983/p/3539324.html
Copyright © 2011-2022 走看看