<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 地理定位示例</title>
</head>
<body>
<h1>地理定位示例</h1>
<p id="location">正在获取位置信息...</p>
<script>
// 检查浏览器是否支持 Geolocation API
if (navigator.geolocation) {
// 获取地理位置
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("location").innerHTML = "浏览器不支持地理定位";
}
// 成功获取位置信息时的回调函数
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 在页面上显示位置信息
document.getElementById("location").innerHTML = "经度: " + longitude + "<br>纬度: " + latitude;
}
// 获取位置信息失败时的回调函数
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("location").innerHTML = "用户拒绝了地理定位请求";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("location").innerHTML = "无法获取用户位置信息";
break;
case error.TIMEOUT:
document.getElementById("location").innerHTML = "获取用户位置信息超时";
break;
case error.UNKNOWN_ERROR:
document.getElementById("location").innerHTML = "发生未知错误";
break;
}
}
</script>
</body>
</html>
在这个示例中，使用 navigator.geolocation 对象调用 getCurrentPosition 方法，它接受两个回调函数作为参数：一个用于成功获取位置信息时的回调函数 showPosition，另一个用于获取位置信息失败时的回调函数 showError。在成功获取位置信息后，会在页面上显示经度和纬度坐标；而在失败时，会显示相应的错误信息。
需要注意的是，由于地理定位涉及用户隐私，浏览器会在获取地理位置信息时询问用户是否允许。在用户拒绝、无法获取位置信息、获取超时或发生未知错误时，相应的错误信息会被传递给错误回调函数。
转载请注明出处：http://www.zyzy.cn/article/detail/12429/HTML