这段HTML代码实现了一个网页，用于获取和显示用户的地理定位信息，包括纬度、经度、位置精度、海拔、海拔精度、方向、速度和定位时间。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>编程笔记 html5&css&js HTML MathML</title>
<meta charset="utf-8" />
<style>
body {
font-size: 2em;
color: cyan;
background-color: teal;
}
.container {
color: cyan;
background-color: teal;
width: 500px; /* 设置容器的宽度 */
margin: 0 auto; /* 将左右边距设置为自动 */
line-height: 2;
}
button {
font-size: 1.5em;
}
h1 {
margin-top: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>测试地理定位</h1>
<p id="demo">
纬度:<br>
经度:<br>
位置精度:<br>
海拔:<br>
海拔精度:<br>
方向:<br>
速度(米/秒):<br>
定位时间: <br>
</p>
<button onclick="getLocation()">获得地理定位</button>
<script>
let x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
//coords.latitude 十进制数的纬度
// coords.longitude 十进制数的经度
// coords.accuracy 位置精度
// coords.altitude 海拔，海平面以上以米计
// coords.altitudeAccuracy 位置的海拔精度
// coords.heading 方向，从正北开始以度计
// coords.speed 速度，以米/每秒计
// timestamp 响应的日期/时间
function showPosition(position) {
x.innerHTML =
"纬度: " +
position.coords.latitude +
"<br />经度: " +
position.coords.longitude +
"<br />位置精度: " +
position.coords.accuracy +
"<br />海拔: " +
position.coords.altitude +
"<br />海拔精度: " +
position.coords.altitudeAccuracy +
"<br />方向: " +
position.coords.heading +
"<br />速度(米/秒): " +
position.speed +
"<br />定位时间: " +
position.timestamp;
}
</script>
</div>
</body>
</html>
二、解释
这段HTML代码实现了一个网页，用于获取和显示用户的地理定位信息，包括纬度、经度、位置精度、海拔、海拔精度、方向、速度和定位时间。页面使用了CSS样式表进行布局和样式设置，使得字体大小为2em，颜色为 cyan，背景颜色为teal。容器宽度为500px，居中显示，行高为2。标题为"测试地理定位"，通过按钮触发获取地理定位信息的操作。获取地理定位信息的功能通过JavaScript实现，使用了navigator.geolocation对象的getCurrentPosition()方法来获取当前位置信息，并通过showPosition()函数将信息显示在页面上。若浏览器不支持地理定位，则显示相应提示信息。
