使用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 + '\n'+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

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

使用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. 201521123036 《Java程序设计》第6周学习总结

    本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 对象克隆:Clon ...

  2. 201521123111《Java程序设计》第14周学习总结

    本次作业参考文件 MySql操作视频与数据库相关jar文件请参考QQ群文件. 1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 连接数据库前,应先 ...

  3. 201521123070 《JAVA程序设计》第14周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现 ...

  4. HTML 自动、手动切换轮播 from：金水

    .自动.手动切换轮播 body代码: <div id="tuijian"> <div class="pages" id="p1&qu ...

  5. Could not chdir to home directory /home/USER: Permission denied

    Could not chdir to home directory /home/USER: Permission denied  2 years ago davidzhang We changed t ...

  6. Linux-exec命令试验驱动(12)

    对于做驱动经常会使用exec来试验驱动,通过exec将-sh进程下的描述符指向我们的驱动,来实现调试 -sh进程常用描述符号: 0:标准输入 1:标准输出 2:错误信息 5:中断服务 exec命令使用 ...

  7. Eclipse将引用了第三方jar包的Java项目打包成jar文件

    第一步:建议手动 Eclipse插件fatjar 安装方法:1:下载地址:http://downloads.sourceforge.net/fjep/net.sf.fjep.fatjar_0.0.27 ...

  8. iOS开发者的管理工具-CocoaPods安装

    1. 安装 Ruby 对于iOS开发者,CocoaPods是最方便使用的第三方管理工具了,但是怎么安装CocoaPods呢,安装CocoaPods之前,要确保mac已经安装上Ruby,但在安装Ruby ...

  9. 【转】Mapreduce部署与第三方依赖包管理

    Mapreduce部署是总会涉及到第三方包依赖问题,这些第三方包配置的方式不同,会对mapreduce的部署便捷性有一些影响,有时候还会导致脚本出错.本文介绍几种常用的配置方式: 1. HADOOP_ ...

  10. 郑厂长系列故事——排兵布阵 hdu4539（状态压缩DP）

    郑厂长系列故事——排兵布阵 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)To ...