<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Geolocation Example</title>
</head>
<body>
<h1>HTML5 Geolocation Example</h1>
<p id="location">Waiting for location...</p>
<script>
// 检查浏览器是否支持地理定位
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
function(position) {
// 获取成功时的回调函数
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 在页面上显示位置信息
document.getElementById("location").innerHTML = "Latitude: " + latitude + "<br>Longitude: " + longitude;
},
function(error) {
// 获取失败时的回调函数
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("location").innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("location").innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
document.getElementById("location").innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
document.getElementById("location").innerHTML = "An unknown error occurred.";
break;
}
}
);
} else {
document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
}
</script>
</body>
</html>
在这个例子中：
- 使用 navigator.geolocation.getCurrentPosition 方法来获取用户的当前位置。
- 成功获取位置信息时，回调函数会接收到一个包含位置信息的 Position 对象。
- 错误处理部分处理了可能的错误情况，例如用户拒绝共享位置、位置信息不可用等。
- 页面上的 <p> 元素用于显示获取到的位置信息。
请注意，获取地理位置信息需要用户的许可。如果用户拒绝共享位置，或者设备不支持地理定位，相应的错误处理代码将执行。在实际应用中，最好为用户提供友好的提示和说明，以便用户理解为何需要获取其位置信息。
转载请注明出处：http://www.zyzy.cn/article/detail/3672/HTML5