html5地理定位数据

原创
2017/06/07 20:38
阅读数 76
<html>
	<head>
			<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script type="text/javascript">
			function body_onload() {
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(geo_onSuccess,geo_onError);
				} else {
					geo_onError();
				}
			}
			function geo_onSuccess(pos) {
				document.getElementById("timestamp").innerHTML = new Date().toLocaleString();
				document.getElementById("accuracySpan").innerHTML = pos.coords.accuracy;
				document.getElementById("altitudeSpan").innerHTML = pos.coords.altitudeSpan;
				document.getElementById("altitudeAccuracySpan").innerHTML = pos.coords.altitudeAccuracy;
				document.getElementById("headingSpan").innerHTML = pos.coords.heading;
				document.getElementById("latitudeSpan").innerHTML = pos.coords.latitude;
				document.getElementById("longitudeSpan").innerHTML = pos.coords.longitude;
				document.getElementById("speedSpan").innerHTML = pos.coords.speed;
			}
			function geo_onError() {
				alert("您当前使用的浏览器不支持Geolocation服务");
			}
			
		</script>
	</head>
	<body onLoad="body_onLoad();">
		<h1> 当前地理位置信息</h1>
		<table>
			<tr>
				<th>accuracy:</th>
				<td><span id="accuracySpan"></span></td>
			</tr>
			<tr>
				<th>altitude:</th>
				<td><span id="altitudeSpan"></span></td>
			</tr>
			<tr>
				<th>altitudeAccuracy:</th>
				<td><span id="altitudeAccuracySpan"></span></td>
			</tr>
			<tr>
				<th>heading:</th>
				<td><span id="headingSpan"></span></td>
			</tr>
			<tr>
				<th>latitude:</th>
				<td><span id="latitudeSpan"></span></td>
			</tr>
			<tr>
				<th>longitude:</th>
				<td><span id="longitudeSpan"></span></td>
			</tr>
			<tr>
				<th>speed:</th>
				<td><span id="speedSpan"></span></td>
			</tr>
		</table>
		<p id="timestamp"/>
	</body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部