HTML Geolocation API 用于获取用户的地理位置。
由于这可能会损害隐私,因此除非用户批准,否则该职位不可用。
对于具有 GPS 的设备(例如智能手机)来说,地理定位最为准确。
所有浏览器都支持 Geolocation API:
Yes | Yes | Yes | Yes | Yes |
地理定位 API 仅适用于安全上下文,例如 HTTPS。
如果您的网站托管在非安全源(例如 HTTP)上,则获取用户位置的请求将不再起作用。
这个getCurrentPosition()
方法用于返回用户的位置。
下面的示例返回用户位置的纬度和经度:
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试 »
示例解释:
上面的示例是一个非常基本的地理定位脚本,没有错误处理。
第二个参数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 地图。
在下面的示例中,返回的纬度和经度用于在 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+"'>";
}
本页面演示了如何在地图上显示用户的位置。
地理定位对于特定位置信息也非常有用,例如:
这个getCurrentPosition()
方法成功时返回一个对象。始终返回纬度、经度和精度属性。如果可用,则返回其他属性:
Property | Returns |
---|---|
coords.latitude | The latitude as a decimal number (always returned) |
coords.longitude | The longitude as a decimal number (always returned) |
coords.accuracy | The accuracy of position (always returned) |
coords.altitude | The altitude in meters above the mean sea level (returned if available) |
coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
coords.heading | The heading as degrees clockwise from North (returned if available) |
coords.speed | The speed in meters per second (returned if available) |
timestamp | The date/time of the response (returned if available) |
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 = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试 »
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!