Web 地理位置 API
定位用户的位置
HTML 地理位置 API 用于获取用户的地理位置。
由于这可能会损害隐私，因此只有在用户批准的情况下才能获取位置。
注意
对于具有 GPS 的设备（如智能手机），地理位置最准确。
浏览器支持
所有浏览器都支持地理位置 API
| 是 | 是 | 是 | 是 | 是 |
注意
地理位置 API 仅在安全上下文中（如 HTTPS）有效。
如果您的网站托管在非安全来源（如 HTTP）上，则获取用户位置的请求将不再起作用。
使用地理位置 API
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() 函数输出纬度和经度
上面的示例是一个非常基本的地理位置脚本，没有错误处理。
处理错误和拒绝
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;
}
}
自己尝试 »
在地图上显示结果
要在地图上显示结果，您需要访问地图服务，例如 Google 地图。
以下示例中，返回的纬度和经度用于在 Google 地图上显示位置（使用静态图像）。
示例
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
位置特定信息
此页面演示了如何在地图上显示用户的当前位置。
地理定位对于位置特定信息也很有用，例如
- 最新的本地信息
- 显示用户附近的兴趣点
- 逐项导航（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 +
"<br>经度: " + position.coords.longitude;
}
</script>
自己尝试 »
