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>

预览