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

1、getCurrentPosition方法的使用

 navigator.geolocation.getCurrentPosition(

         function (position) {

             //获取地理位置成功时所做的处理

     },

         function (error) {

             //获取地理位置信息失败时所做的处理

     }, //以下是可选属性

         {

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

             timeout: 1000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误

             maximumAge:60*1000//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃

         })

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

 <!Doctype html>

 <html>

 <head>

     <title></title>

     <meta charset="utf-8" />

     <meta name="keywords" content="关键词"/>

     <meta name="description" content="描述"/>

     <meta name="author" content="奇客艺术"/>

 </head>

 <body>

 <p id="GeoDisplay"></p>

 <script>

     Geolocation();//执行Geolocation()函数

     setInterval(Geolocation,100);//设置定时器，100ms执行一次Geolocation();实现实时获取

     function getElem(id) {

         return typeof id === 'string' ? document.getElementById(id):id;//typeof表示变量id的类型为字符串类型

     }

     var GetID = getElem("GeoDisplay");

     function showMap(lat,lon) {//自定义了一个在浏览器上显示地理信息的函数

     var str = "您当前位置的维度："+lat+"，经度："+lon;

         GetID.innerHTML = str;

     }

     function Geolocation() {

         if(navigator.geolocation){

             navigator.geolocation.getCurrentPosition(

                 function (position) {//传入了对象position

                     showMap(position.coords.latitude,position.coords.longitude);

                 },

                 function (err) {//传入了error对象

                     GetID.innerHTML = err.code + '\n'+err.message;//Firefox3.6以上不支持error对象的message属性

                     //error对象的code属性有如下属性值:

                     //PERMISSION_DENIED(1):(permission_denied):用户单机信息条上的“不共享”按钮或直接拒绝被获取位置信息

                     //POSITION_UNAVAILABLE(2):(position_unavailable):(position_unavailable)网络不可用或者无法连接到获取位置信息的卫星

                     //TIMEOUT(3):(timeout)网络可用但在计算机用户的位置上花费过长时间

                     //UNKNOWN_ERROR(0):(unknown_error)发生其他未知错误

                 })

             }else {

                 GetID.innerHTML = "您当前使用的浏览器不支持地理定位服务";

         }

     }

 </script>

 </body>

 </html>

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

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

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

使用getCurrentPosition方法实时获取当前Geolocation信息（赋源码文件）--html5、JavaScript的更多相关文章

  1. 使用getCurrentPosition方法实时获取当前Geolocation信息（附源码文件）--html5、JavaScript

    使用getCurrentPosition方法实时获取当前Geolocation信息: 1.getCurrentPosition方法的使用 navigator.geolocation.getCurren ...

  2. 在Android Studio中使用BaiduMap SDK实时获取当地位置信息

    配置BaiduMap 环境 1.在百度API中新建自己的一个APP包名和APP名需要注意和自己Android Studio 中的包名和APP名保持一致: 2.百度地图中还需要填写一个SHA1 数字签名 ...

  3. flowable中使用到的一些方法。获取人员部门信息

    package org.springblade.desk.utils; import lombok.AllArgsConstructor; import lombok.extern.slf4j.Slf ...

  4. 获取windows进程信息及CListCtrl控件(List Control)练习

    环境:VS2010/MFC/对话框 效果图: 目录: 1.  关于windows进程信息获取 2.  CListCtrl的使用 ------------------------------------ ...

  5. 如何用js得到当前页面的url信息方法(JS获取当前网址信息)

    设置或获取对象指定的文件名或路径. alert(window.location.pathname) 设置或获取整个 URL 为字符串. alert(window.location.href); 设置或 ...

  6. 怎样用js得到当前页面的url信息方法(JS获取当前网址信息)

    设置或获取对象指定的文件名称或路径.window.location.pathname 设置或获取整个 URL 为字符串.window.location.href; 设置或获取与 URL 关联的端口号码 ...

  7. js获取当前页面url信息方法(JS获取当前网址信息)

    设置或获取对象指定的文件名或路径. alert(window.location.pathname) 设置或获取整个 URL 为字符串. alert(window.location.href); 设置或 ...

  8. HDFS源码文件过大，IDEA打开失败解决方法

    问题现象:hadoop 3.1.0源码文件ClientNamenodeProtocolProtos大小4M+,IDEA打开时加载失败,ClientNamenodeProtocolPB报错找不到类. - ...

  9. Nginx优化之基本安全优化 (隐藏Nginx软件版本号信息,更改源码隐藏Nginx软件名及版本号,更改Nginx服务的默认用户)

    一,隐藏Nginx软件版本号信息 查看版本号 curl -I 192.168.0.220 HTTP/1.1 200 OK Server: nginx/1.6.2 #这里清晰的暴露了Web版本号(1.6 ...

随机推荐

  1. 【Alpha】Daily Scrum Meeting——Day4

    站立式会议照片 1.本次会议为第四次Meeting会议: 2.本次会议在大课间09:40,在图书馆一楼楼道召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 ...

  2. 201521145048《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 错误 ...

  3. 201521123003《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  4. 学习Python不得不关注和学习的国外大神博客

    注意 : 本文收集于网路 . 由于常常更新 , 有些链接打不开, 请自备梯子 在学习Python过程中,总会遇到各种各样的坑, 虽然Python是一门优美而简单易学的语言 . 但当学习后 , 总想着更 ...

  5. [02] Servlet获取请求和页面跳转

    1.Tomcat和Servlet的关系 之前提到过,Servlet是运行在Web容器里的,Tomcat作为容器的一种,在这里自然也要大概说说两者之间的大致关系. 首先,如上所述,Tomcat是Web应 ...

  6. docker应用笔记

    first install it: 首先安装: apt install docker.io 基本概念: 镜像:相当于虚拟机里的磁盘文件,里面有一套配置好的系统,应用程序 容器:相当于一个虚拟机实例,一 ...

  7. 用vue开发一个app（1，基础环境配置）

    在今天之前,我没有很系统的看过,学习过vue.也是第一次尝试用vue写个小应用 现在开始研究配环境 这边参考的是https://cn.vuejs.org/v2/guide/installation.h ...

  8. 系统学习java高并发系列二

    转载请注明原创出处,谢谢! 什么是线程? 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程 ...

  9. Java平台与.Net平台在服务器端前景预测

    如果是服务器端, 毫无疑问C#是很难跟Java拼的. 就算将来,微软逆袭的机会也很渺茫了.就技术的先进性来说, Java平台是不如.Net平台, 但是, 程序员对于两个平台,直接接触的基本以语言为主, ...

  10. oc __weak和__strong的区别

    1.先上代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 id __weak obj=[[NSObject alloc]init];     NSLog(@"弱引 ...