文档章节

HTML5 监听当前位置

j
 james_laughing
发布于 2017/09/08 12:27
字数 355
阅读 8
收藏 0
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听当前位置</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<style>
			table {border-collapse: collapse;}
			th, td {padding: 4px;}
			th {text-align:right;}
			
			.table-container
			{
			width: 100%;
			overflow-y: auto;
			_overflow: auto;
			margin: 0 0 1em;
			}
			table{border:0; border-collapse:collapse;}
			table td,table th{border:1px solid #999; padding:.5em 1em}
			//添加IOS下滚动条
			.table-container::-webkit-scrollbar
			{
			-webkit-appearance: none;
			width: 14px;
			height: 14px;
			}
			
			.table-container::-webkit-scrollbar-thumb
			{
			border-radius: 8px;
			border: 3px solid #fff;
			background-color: rgba(0, 0, 0, .3);
			}		
		</style>
	</head>
	<body>
	<div class="table-container">
		<table border="1" >
			<tr>
				<th>经度:</th><td id="longitude">-</td>
			</tr>
			<tr>
			
				<th>纬度:</th><td id="latitude">-</td>
			</tr>
			
			<tr>
				<th>海拔:</th><td id="altitude">-</td>
			</tr>
			<tr>
				<th>坐标精度:</th><td id="accuracy">-</td>
			</tr>
			<tr>
				<th>海拔精度:</th><td id="altitudeAccuracy">-</td>
			</tr>
			<tr>
				<th>行进方向:</th><td id="heading">-</td>
			</tr>
			<tr>
				<th>行进速度:</th><td id="speed">-</td>
			</tr>
			<tr>
				<th>时间戳:</th><td id="timestamp">-</td>
			</tr>
			<tr>
				<th>错误码:</th><td id="errcode">-</td>
			</tr>
			<tr>
				<th>错误信息:</th><td id="errmessage">-</td>
			</tr>
		</table>
		<button id="pressme">停止监听</button>
	</div>
		<script>
			
			var options = {
				enableHighAccuracy: true,
				timeout: 2000,
				maximumAge: 30000
			};
			
			var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
			
			document.getElementById("pressme").onclick = function(e) {
				navigator.geolocation.clearWatch(watchID);
			};
			
			function displayPosition(pos) {
				var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
				for (var i =0; i< properties.length; i++) {
					var value = pos.coords[properties[i]];
					document.getElementById(properties[i]).innerHTML = value; 
				}
				document.getElementById("timestamp").innerHTML = pos.timestamp;
			}
			
			function handleError(err) {
				
				
				document.getElementById("errcode").innerHTML = err.code;
				
				switch(err.code) {
					case 1:
						
					   document.getElementById("errmessage").innerHTML = "用户末授权使用地理定位功能"; 
					   break;
					case 2:
						 document.getElementById("errmessage").innerHTML = "不能确定位置"; 
						  break;
					case 3:
						document.getElementById("errmessage").innerHTML = "请求位置的尝试已超时"; 
						break;
						
						
						
					
				}
				//document.getElementById("errcode").innerHTML = err.code;
				//document.getElementById("errmessage").innerHTML = err.message;
			}
		</script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
j
粉丝 27
博文 448
码字总数 22078
作品 0
广州
私信 提问
第139天:详解cookie、 sessionStorage 和localStorage

1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否...

半指温柔乐
01/08
0
0
sessionStorage保存滚动条位置

1、localStorage、sessionStorage他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。 2、localStorage生命周期是永久,这意味...

少年已不再年少
08/20
0
0
实现多个标签页之间通信的几种方法(sharedworker)

示例地址 prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种:使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedW...

ITgecko
04/11
0
0
HTML5 高级系列:web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。 localStora...

课工场CC老师
2017/10/26
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mac 下 mysql 8.0.13 安装并记录遇到的问题 以便以后查看

安装 官网mysql 下载地址 安装过程 省去 安装好之后 下载navicat 错误1 链接 遇到 mysql 2003 - Can't connect to MySQL server 错误, 解决方案 重启mysql 服务 #错误2 ERROR 1045: Acces...

杭州-IT攻城狮
32分钟前
3
0

中国龙-扬科
35分钟前
1
0
[Spring4.x]基于spring4.x纯注解的Web工程搭建

在前文中已经说明了如何基于 Spring4.x+ 版本开发纯注解的非web项目,链接如下: https://my.oschina.net/morpheusWB/blog/2985600 本文则主要说明,如何在Web项目中,"基于spring纯注解方式...

morpheusWB
今天
13
0
基础编程题目集-7-13 日K蜡烛图

股票价格涨跌趋势,常用蜡烛图技术中的K线图来表示,分为按日的日K线、按周的周K线、按月的月K线等。以日K线为例,每天股票价格从开盘到收盘走完一天,对应一根蜡烛小图,要表示四个价格:开...

niithub
今天
5
0
Jenkins window 下的安装使用

1.下载:https://jenkins.io/download/ 双击安装完毕,将自动打开浏览器: http://localhost:8080 打开对应位置的文件,将初始密钥粘贴至输入框。 第一个是 安装默认的软件;第二个是 自定义...

狼王黄师傅
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部