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 地理位置
The 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 +
"<br>经度： " + position.coords.longitude;
}
</script>
自己试试 »
示例说明
- 检查是否支持地理位置定位
- 如果支持，则运行 getCurrentPosition() 方法。 如果不支持，则向用户显示一条消息
- 如果 getCurrentPosition() 方法成功，它将返回一个坐标对象到参数中指定的函数 (showPosition)
- showPosition() 函数输出纬度和经度
上面的示例是一个非常基本的地理位置脚本，没有错误处理。
处理错误和拒绝
The 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() 方法 - 返回数据
The 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 +
"<br>经度： " + position.coords.longitude;
}
</script>
自己试试 »
