使用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. Codeforces 841D Leha and another game about graph - 差分

    Leha plays a computer game, where is on each level is given a connected graph with n vertices and m  ...

  2. ListView与ArrayAdapter(二)

    ArrayAdapter: 数组适配器,用于简单的文字列表 activity_main.xml <RelativeLayout xmlns:android="http://schema ...

  3. Spring 学习——Spring IOC概念

    Spring IOC 接口及面向接口编程 接口 定义及理解:接口是一个类的抽象声明,用于由内部操作分离出外部沟通的方式,使其内部进行修改而不影响其外部连接沟通的一种交互方式.不对外公开逻辑处理,只是返 ...

  4. 【做题】TCSRM592 Div1 500 LittleElephantAndPermutationDiv1——计数&dp

    题意:定义函数\(f(A,B) = \sum_{i=1}^n \max(A_i,B_i)\),其中\(A\)和\(B\)都是长度为\(n\)的排列.给出\(n\)和\(k\),问有多少对\((A,B) ...

  5. (转)renren-fast解读(一)

    (二期)8.renren-fast项目解读(一) [课程八]预防xss...注入.xmind0.2MB [课程八预习]开...解读.xmind0.5MB 课程八_日志处理与...模块.xmind0.2 ...

  6. [转]web高级开发的成长之路

    读了这篇文章之后感觉蛮受启发的,在此分享一下,献给和我一样处于困惑的朋友. 正文如下: 本人也是coding很多年,虽然很失败,但也总算有点失败的心得,不过我在中国,大多数程序员都是像我一样,在一直走 ...

  7. P3239 [HNOI2015]亚瑟王

    思路 神仙概率dp 由于期望的线性性质,能够想到最后要求的期望价值就是把每个卡牌发动的概率\(g_i\)乘上伤害\(val_i\)之后加到一起 然后怎么求\(g_i\)呢,肯定是要dp的 我想了例如d ...

  8. 深度学习课程笔记(七):模仿学习(imitation learning)

    深度学习课程笔记(七):模仿学习(imitation learning) 2017.12.10 本文所涉及到的 模仿学习,则是从给定的展示中进行学习.机器在这个过程中,也和环境进行交互,但是,并没有显 ...

  9. 配置SSH无密码登录

    首先进入目录 : /home/zuoyan/.ssh 在-的  .ssh 下 使用命令生成密钥 ssh-keygen -t rsa 敲4下回车 然后将公钥配置到需要的机器上,复制的目标机器最后是用户名 ...

  10. Derek解读Bytom源码-创世区块

    作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...