使用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.typeof 运算符返回一个用来表示表达式的数据类型的字符串 <script> alert(typ ...

  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. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

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

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

随机推荐

  1. 从Git上导入Ｍaven 项目到Eclipse

    Note: 经验之谈,操作过程中有不懂的地方可以留言问. Step: Open the Eclipse: --1.File>>Import>>Git:Project from ...

  2. bzoj1741 [Usaco2005 nov]Asteroids 穿越小行星群 最小点覆盖

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1741 思路 消除所有的小行星 每个点(x,y)只有选择x或者y才能被覆盖 二分图最小点覆盖= ...

  3. 算法总结（转自CS-Notes）

    转载地址: 注意要点: 1.希尔排序:实际是将元素按步距h分为几组,每组元素没有关系,是组里每个元素跨步距h得到的一组元素是有序的,那么剩下的问题就是组内有序,再处理好组间边界即可.实际解决的方式是不 ...

  4. centos7 mail

    For anyone wondering how to read these messages one by one, you can just use 'mail' $ mail Then type ...

  5. nohup 让进程在后台可靠运行的几种方法

    1. nohup nohup 无疑是我们首先想到的办法.顾名思义,nohup 的用途就是让提交的命令忽略 hangup 信号. nohup 的使用是十分方便的,只需在要处理的命令前加上 nohup 即 ...

  6. 取消开机logo，改成代码刷屏

    将开机logo改成开始时代码刷屏,这样就能很方便看到开始时的一些问题 首先 sudo chmod 666 /etc/default/grub 然后将 GRUB_CMDLINE_LINUX_DEFAUL ...

  7. spring 配置事务xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  8. sublime插件开发手记

    原:http://blog.hickwu.com/sublime插件开发手记   标题: sublime插件开发手记 时间: 2014-01-05 14:58:02 正文: 插件基本结构 基本插件实现 ...

  9. 基于SVM的python简单实现验证码识别

    验证码识别是一个适合入门机器学习的项目,之前用knn 做过一个很简单的,这次用svm来实现.svm直接用了开源的库libsvm.验证码选的比较简单,代码也写得略乱,大家看看就好. 1. 爬取验证码图片 ...

  10. 正则表达式 & re

    本节主要内容: 1.正则表达式 2.re模块的使用 一.正则表达式 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE), 计算机 ...