使用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

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

原文地址:https://www.cnblogs.com/qikeyishu/p/7708116.html