zoukankan      html  css  js  c++  java
  • 使用getCurrentPosition方法实时获取当前Geolocation信息(附源码文件)--html5、JavaScript

    使用getCurrentPosition方法实时获取当前Geolocation信息:

    1、getCurrentPosition方法的使用

     1 navigator.geolocation.getCurrentPosition(
     2         function (position) {
     3             //获取地理位置成功时所做的处理
     4     },
     5         function (error) {
     6             //获取地理位置信息失败时所做的处理
     7     }, //以下是可选属性
     8         {
     9             enableHighAccuracy: true,//是否要求高精度的地理位置信息
    10             timeout: 1000,//对地理位置信息的获取操作做超时限制,如果再该事件内未获取到地理位置信息,将返回错误
    11             maximumAge:60*1000//设置缓存有效时间,在该时间段内,获取的地理位置信息还是设置此时间段之前的那次获得的信息,超过这段时间缓存的位置信息会被废弃
    12         })

    2、使用getCurrentPosition方法和position对象的一些属性等实现实时获取地理位置的经纬度

     1 <!Doctype html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <meta charset="utf-8" />
     6     <meta name="keywords" content="关键词"/>
     7     <meta name="description" content="描述"/>
     8     <meta name="author" content="奇客艺术"/>
     9 </head>
    10 <body>
    11 <p id="GeoDisplay"></p>
    12 <script>
    13     Geolocation();//执行Geolocation()函数
    14     setInterval(Geolocation,100);//设置定时器,100ms执行一次Geolocation();实现实时获取
    15     function getElem(id) {
    16         return typeof id === 'string' ? document.getElementById(id):id;//typeof表示变量id的类型为字符串类型
    17     }
    18     var GetID = getElem("GeoDisplay");
    19     function showMap(lat,lon) {//自定义了一个在浏览器上显示地理信息的函数
    20     var str = "您当前位置的维度:"+lat+",经度:"+lon;
    21         GetID.innerHTML = str;
    22     }
    23     function Geolocation() {
    24         if(navigator.geolocation){
    25             navigator.geolocation.getCurrentPosition(
    26                 function (position) {//传入了对象position
    27                     showMap(position.coords.latitude,position.coords.longitude);
    28                 },
    29                 function (err) {//传入了error对象
    30                     GetID.innerHTML = err.code + '
    '+err.message;//Firefox3.6以上不支持error对象的message属性
    31                     //error对象的code属性有如下属性值:
    32                     //PERMISSION_DENIED(1):(permission_denied):用户单机信息条上的“不共享”按钮或直接拒绝被获取位置信息
    33                     //POSITION_UNAVAILABLE(2):(position_unavailable):(position_unavailable)网络不可用或者无法连接到获取位置信息的卫星
    34                     //TIMEOUT(3):(timeout)网络可用但在计算机用户的位置上花费过长时间
    35                     //UNKNOWN_ERROR(0):(unknown_error)发生其他未知错误
    36                 })
    37             }else {
    38                 GetID.innerHTML = "您当前使用的浏览器不支持地理定位服务";
    39         }
    40     }
    41 </script>
    42 </body>
    43 </html>

    Effect  Picture:(当然也会受到网络的影响,变化没那么快;Microsoft Edge 38.14393.0.0下测试)

    源码文件下载:getCurrentPosition方法实时获取当前Geolocation信息.zip

    文章系笔者原创,转载请注明出处,感谢合作!

  • 相关阅读:
    强制数据类型转换之Number类型
    强制类型转换之String类型
    数据类型之字符串类型与Number类型
    favicon.ico是什么?
    什么是自幂数?
    JavaScript基础之变量的自增与自减
    CMD 命令
    那些看完很有同感的语句
    HTML5 canvas 元素
    HTML的多媒体属性
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7708116.html
Copyright © 2011-2022 走看看