使用getCurrentPosition方法实时获取当前Geolocation信息(赋源码文件)--html5、JavaScript
使用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的更多相关文章
- 使用getCurrentPosition方法实时获取当前Geolocation信息(附源码文件)--html5、JavaScript
使用getCurrentPosition方法实时获取当前Geolocation信息: 1.getCurrentPosition方法的使用 navigator.geolocation.getCurren ...
- 在Android Studio中使用BaiduMap SDK实时获取当地位置信息
配置BaiduMap 环境 1.在百度API中新建自己的一个APP包名和APP名需要注意和自己Android Studio 中的包名和APP名保持一致: 2.百度地图中还需要填写一个SHA1 数字签名 ...
- flowable中使用到的一些方法。获取人员部门信息
package org.springblade.desk.utils; import lombok.AllArgsConstructor; import lombok.extern.slf4j.Slf ...
- 获取windows进程信息及CListCtrl控件(List Control)练习
环境:VS2010/MFC/对话框 效果图: 目录: 1. 关于windows进程信息获取 2. CListCtrl的使用 ------------------------------------ ...
- 如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径. alert(window.location.pathname) 设置或获取整个 URL 为字符串. alert(window.location.href); 设置或 ...
- 怎样用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名称或路径.window.location.pathname 设置或获取整个 URL 为字符串.window.location.href; 设置或获取与 URL 关联的端口号码 ...
- js获取当前页面url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径. alert(window.location.pathname) 设置或获取整个 URL 为字符串. alert(window.location.href); 设置或 ...
- HDFS源码文件过大,IDEA打开失败解决方法
问题现象:hadoop 3.1.0源码文件ClientNamenodeProtocolProtos大小4M+,IDEA打开时加载失败,ClientNamenodeProtocolPB报错找不到类. - ...
- Nginx优化之基本安全优化 (隐藏Nginx软件版本号信息,更改源码隐藏Nginx软件名及版本号,更改Nginx服务的默认用户)
一,隐藏Nginx软件版本号信息 查看版本号 curl -I 192.168.0.220 HTTP/1.1 200 OK Server: nginx/1.6.2 #这里清晰的暴露了Web版本号(1.6 ...
随机推荐
- 201521123023《java程序设计》第四周学习总结
1. 本周学习总结 思维导图 常规: (1)抽象类:不能被直接实例化.只能作为其它类的父类,这一点与final类正好相反.用关键词abstract声明. (2)继承:只能有一个父类,即单继承,子类继承 ...
- 201521123096《Java程序设计》第十一周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 (1)互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123026《Java程序设》 第10周学习总结
1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 1.守护线程:setDaemon(true or false),如果所有前台线程死亡,守护线程自动结束,一般 ...
- php数据库操作小要点
保留小数点后两位 $ba = floor(($v[2]/$sum[0][0])*10000); //取整数 $bb = $ba/100; //两位小数 列的值加一可以直接用自身,不用单独查询出来 $s ...
- Java:接口继承接口 (多继承机制)
在看API文档时,突然发现一个接口可以是其他接口的子接口,这说明接口之间会存在继承的关系.查找了相关的资料,做一个总结. 是继承还是实现 首先要搞清楚接口之间的关系使用的关键字是extends还是im ...
- 在Ubuntu中部署并测试Fabric 1.0 Beta
[更新:1.0Beta已经是过去式了,现在出了1.0.0的正式版,请大家参照 http://www.cnblogs.com/studyzy/p/7437157.html 安装Fabric 1.0.0 ...
- sqlserver2012安装过程
第三次安装sqlserver2012 记录下安装过程,受益的人多多指教. 一.以我的系统64位为例,所以先准备安装包,从官网 https://www.microsoft.com/zh-CN/downl ...
- java如何将html过滤为纯文本
java开发中jsp页面可以嵌套很多插件就可以将html形式的文本直接转化为纯文本,但是如果你已经保存下来或者没有运用插件,这个额html形式的文本你该怎么转化为纯文本呢?有次我将公告保存了html形 ...
- JMeter基础之—录制脚本
Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l 开源,他是一款开源的免费软 ...
- 深度学习网络层之 Batch Normalization
Batch Normalization Ioffe 和 Szegedy 在2015年<Batch Normalization: Accelerating Deep Network Trainin ...