HTML 地理定位 API
HTML 地理定位 API 用于定位用户的位置。
定位用户的位置
HTML 地理定位 API 用于获取用户的地理位置。
由于这可能会泄露隐私，除非用户批准，否则无法获取位置信息。
注意：带有 GPS 的设备（如智能手机）的地理定位最准确。
浏览器支持
表中的数字表示完全支持地理定位的第一个浏览器版本。
| API | |||||
|---|---|---|---|---|---|
| 地理定位 | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
注意：自 Chrome 50 起，地理定位 API 仅在 HTTPS 等安全上下文上运行。如果您的站点托管在非安全源（如 HTTP）上，则获取用户位置的请求将不再起作用。
使用 HTML 地理定位
getCurrentPosition() 方法用于返回用户的位置。
下面的示例返回用户位置的纬度和经度
示例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "纬度: " + position.coords.latitude +
"
经度： " + position.coords.longitude;
}
</script>
自己动手试一试 »
示例说明
- 检查是否支持地理定位
- 如果支持，运行 getCurrentPosition() 方法。否则，向用户显示一条消息
- 如果 getCurrentPosition() 方法成功，它会向参数中指定的函数 (showPosition) 返回一个 coordinates 对象
- showPosition() 函数输出纬度和经度
上面的示例是一个非常基本的地理定位脚本，没有错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它指定一个函数，在无法获取用户位置时运行
示例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED
x.innerHTML = "用户拒绝了地理定位请求。"
break;
case error.POSITION_UNAVAILABLE
x.innerHTML = "位置信息不可用。"
break;
case error.TIMEOUT
x.innerHTML = "获取用户位置的请求超时。"
break;
case error.UNKNOWN_ERROR
x.innerHTML = "发生未知错误。"
break;
}
}
自己动手试一试 »
特定位置信息
本页演示了如何在地图上显示用户的位置。
地理定位对于特定位置的信息也非常有用，例如
- 最新的本地信息
- 显示用户附近的兴趣点
- 逐向导航 (GPS)
getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 方法在成功时返回一个对象。始终返回纬度、经度和精度属性。如果可用，则返回其他属性
| 属性 | 返回 |
|---|---|
| coords.latitude | 纬度，十进制数（始终返回） |
| coords.longitude | 经度，十进制数（始终返回） |
| coords.accuracy | 位置精度（始终返回） |
| coords.altitude | 海拔，以米为单位，高于平均海平面（如果可用，则返回） |
| coords.altitudeAccuracy | 位置海拔精度（如果可用，则返回） |
| coords.heading | 从正北方向顺时针测量的航向，以度为单位（如果可用，则返回） |
| coords.speed | 速度，以米/秒为单位（如果可用，则返回） |
| timestamp | 响应的日期/时间（如果可用，则返回） |
地理定位对象 - 其他有趣的方法
地理定位对象还有其他有趣的方法
watchPosition()- 返回用户的当前位置，并在用户移动时持续返回更新的位置（类似于汽车中的 GPS）。clearWatch()- 停止watchPosition()方法。
下面的示例演示了 watchPosition() 方法。您需要一个精确的 GPS 设备来测试此功能（如智能手机）
示例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "纬度: " + position.coords.latitude +
"
经度： " + position.coords.longitude;
}
</script>
自己动手试一试 »
