HTML5 Geolocation（地理定位）学习笔记
一、HTML5 Geolocation简介
HTML5 Geolocation（地理定位）API用于获取用户的地理位置信息。通过这个API，可以获取用户的纬度、经度、海拔等信息。由于地理定位可能涉及用户隐私，因此只有在用户同意的情况下，才能获取其位置信息。
Geolocation API支持以下浏览器：
-
Internet Explorer 9+
-
Firefox
-
Chrome
-
Safari
-
Opera
对于拥有GPS的设备（如iPhone），地理定位更加精确。
二、获取用户位置
1. 使用getCurrentPosition()方法
getCurrentPosition()方法用于获取用户的当前位置。如果成功，该方法会调用一个回调函数，并将位置信息作为参数传递给该函数。如果失败，则会调用另一个回调函数（可选）来处理错误。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation 示例</title>
</head>
<body>
<p id="demo">点击按钮获取您的位置：</p>
<button onclick="getLocation()">获取位置</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("demo").innerHTML = "该浏览器不支持获取地理位置。";
}
}
function showPosition(position) {
document.getElementById("demo").innerHTML =
"纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("demo").innerHTML = "用户拒绝对获取地理位置的请求。";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("demo").innerHTML = "位置信息是不可用的。";
break;
case error.TIMEOUT:
document.getElementById("demo").innerHTML = "请求用户地理位置超时。";
break;
case error.UNKNOWN_ERROR:
document.getElementById("demo").innerHTML = "未知错误。";
break;
}
}
</script>
</body>
</html>预览
示例说明：
-
navigator.geolocation：检查浏览器是否支持地理定位。 -
getCurrentPosition()：获取用户当前位置。第一个参数是成功回调函数，第二个参数是错误处理函数（可选）。 -
showPosition()：成功获取位置后，显示纬度和经度。 -
showError()：处理获取位置时可能出现的错误。
三、在地图中显示位置
获取到用户的位置信息后，可以使用地图服务（如Google Maps或百度地图）将位置显示在地图上。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation 地图显示</title>
</head>
<body>
<p id="demo">点击按钮获取您的位置并显示在地图上：</p>
<button onclick="getLocation()">获取位置</button>
<div id="mapholder"></div>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("demo").innerHTML = "该浏览器不支持获取地理位置。";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+ latlon + "&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>";
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("demo").innerHTML = "用户拒绝对获取地理位置的请求。";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("demo").innerHTML = "位置信息是不可用的。";
break;
case error.TIMEOUT:
document.getElementById("demo").innerHTML = "请求用户地理位置超时。";
break;
case error.UNKNOWN_ERROR:
document.getElementById("demo").innerHTML = "未知错误。";
break;
}
}
</script>
</body>
</html>预览
示例说明：
-
showPosition()：获取到位置信息后，使用Google Maps的静态地图API生成地图图片，并显示在页面上。 -
img_url：通过拼接纬度和经度，生成Google Maps的静态地图URL。
四、实时跟踪用户位置
watchPosition()方法用于实时跟踪用户的当前位置，并在用户移动时更新位置信息。与getCurrentPosition()方法类似，watchPosition()也接受两个回调函数：一个用于成功，一个用于错误处理。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation 实时跟踪</title>
</head>
<body>
<p id="demo">实时跟踪您的位置：</p>
<button onclick="getLocation()">开始跟踪</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition, showError);
} else {
document.getElementById("demo").innerHTML = "该浏览器不支持获取地理位置。";
}
}
function showPosition(position) {
document.getElementById("demo").innerHTML =
"纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("demo").innerHTML = "用户拒绝对获取地理位置的请求。";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("demo").innerHTML = "位置信息是不可用的。";
break;
case error.TIMEOUT:
document.getElementById("demo").innerHTML = "请求用户地理位置超时。";
break;
case error.UNKNOWN_ERROR:
document.getElementById("demo").innerHTML = "未知错误。";
break;
}
}
</script>
</body>
</html>预览
示例说明：
-
watchPosition()：实时跟踪用户位置，并在用户移动时更新位置信息。 -
showPosition()：显示实时更新的纬度和经度。