Web Geolocation API
定位用户位置
HTML Geolocation API 用于获取用户的地理位置。
由于这可能会损害隐私,因此在用户批准之前无法获得该位置。
注意
对于具有 GPS 的设备(如智能手机),地理位置通常最准确。
浏览器支持
所有浏览器都支持 Geolocation API
是 | 是 | 是 | 是 | 是 |
注意
Geolocation API 仅在 HTTPS 等安全上下文中运行。
如果您的网站托管在不安全的来源(如 HTTP)上,则获取用户位置的请求将不再有效。
使用 Geolocation 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>Longitude: " + position.coords.longitude;
}
</script>
自己动手试一试 »
示例说明
- 检查 Geolocation 是否受支持
- 如果支持,则运行 getCurrentPosition() 方法。否则,向用户显示一条消息
- 如果 getCurrentPosition() 方法成功,它会将一个坐标对象返回给参数中指定的函数(showPosition)
- showPosition() 函数输出纬度和经度
上面的示例是一个非常基本的 Geolocation 脚本,没有错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它指定了一个函数,用于在无法获取用户位置时运行
示例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR
x.innerHTML = "An unknown error occurred."
break;
}
}
自己动手试一试 »
在地图上显示结果
要在地图上显示结果,您需要访问地图服务,例如 Google Maps。
在下面的示例中,返回的纬度和经度用于在 Google Map 中显示位置(使用静态图像)
示例
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+"'>";
}
特定于位置的信息
此页面演示了如何在地图上显示用户的位置。
Geolocation 对于特定于位置的信息也非常有用,例如
- 最新的本地信息
- 显示用户附近的兴趣点
- 逐向导航 (GPS)
getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 方法在成功时返回一个对象。纬度、经度和精度属性始终返回。其他属性在可用时返回
属性 | 返回 |
---|---|
coords.latitude | 纬度,以十进制数表示(始终返回) |
coords.longitude | 经度,以十进制数表示(始终返回) |
coords.accuracy | 位置的精度(始终返回) |
coords.altitude | 海拔高度,以米为单位,高于平均海平面(如果可用则返回) |
coords.altitudeAccuracy | 位置的海拔高度精度(如果可用则返回) |
coords.heading | 航向,以度为单位,从北顺时针方向(如果可用则返回) |
coords.speed | 速度,以米/秒为单位(如果可用则返回) |
timestamp | 响应的日期/时间(如果可用则返回) |
Geolocation 对象 - 其他有趣的方法
Geolocation 对象还有其他有趣的方法
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>Longitude: " + position.coords.longitude;
}
</script>
自己动手试一试 »