使用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.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. 牛客网数据库SQL实战(1-5)

    1.查找最晚入职员工的所有信息 CREATE TABLE `employees` ( `emp_no` int(11) NOT NULL, `birth_date` date NOT NULL, `f ...

  2. Vue学习【第六篇】：Vue-cli脚手架（框架）与实战案例

    环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --registry=https://re ...

  3. ps一些疑问知识点

    PS 的核心, 是 选择, 是 抠图, 不管是蒙版, 通道也好等等, 其实主要的作用还是 抠图. 还是精确地 选出你要处理的 内容对象! 如何改变工具预设? 使用工具预设, 可以将你当前正在使用的 / ...

  4. 放棋子|2012年蓝桥杯B组题解析第七题-fishers

    (13')放棋子 今有 6 x 6 的棋盘格.其中某些格子已经预先放好了棋子.现在要再放上去一些,使得:每行每列都正好有3颗棋子.我们希望推算出所有可能的放法.下面的代码就实现了这个功能. 初始数组中 ...

  5. Concepts-->Migrations

    https://flywaydb.org/documentation/migrations Overview With Flyway all changes to the database are c ...

  6. C# winform combobox默认选中项方法

    https://blog.csdn.net/easyboot/article/details/68062196 可以使用 Combobox.SelectText = “默认选中文本”; 但是如果Com ...

  7. Css下拉菜单设置

    <style type="text/css"> *{margin:0px;padding:0px;}设置所有标签属性<初始化页面属性> #nav{backg ...

  8. [午间休息] - 午间codewars活跃脑袋

    https://www.codewars.com/kata/51f2b4448cadf20ed0000386/javascript 中午是一个易困的时间段.如果其它人不睡觉还好. 这个js题目就是说如 ...

  9. k8s2

    1.主节点与子节点如何沟通,交互 apiServer <==> kublet 2. pod之间如何共享, 使用volumn(数据卷 ) kube-proxy 和 service 配置好网络 ...

  10. kubernetes 实战5_命令_Assign Pods to Nodes&Configure a Pod to Use a ConfigMap

    Assign Pods to Nodes how to assign a Kubernetes Pod to a particular node in a Kubernetes cluster. Ad ...