返回列表 发帖

Web Geolocation API

HTML Geolocation API 用于获取用户的地理位置。

由于这可能会损害隐私,除非用户批准,否则位置不可用。

亲自试一试
注释:地理定位对于带有 GPS 的设备(如智能手机)最为准确。

所有浏览器都支持 Geolocation API:
Chrome        IE        Firefox        Safari        Opera
支持        支持        支持        支持        支持
注释:从 Chrome 50 开始,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 = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试
例子解释:
检查是否支持 Geolocation
如果支持,请运行 getCurrentPosition() 方法。如果没有,则向用户显示一条消息
如果 getCurrentPosition() 方法成功,则返回一个 coordinates 对象给参数 (showPosition) 中规定的函数
showPosition() 函数输出纬度和经度
上面的例子是一个非常基本的地理定位脚本,没有错误处理。

处理错误和拒绝
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+"'>";
}
Location-specific 信息
此页面演示了如何在地图上显示用户的位置。

Geolocation 对于特定于位置的信息也非常有用,例如:

最新的本地信息
显示用户附近的兴趣点
逐向导航(Turn-by-turn navigation)(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 = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试
Web Fetch API
AJAX 简介
JavaScript 和 HTML DOM 参考手册
JavaScript 实例
JavaScript 测验
JavaScript 高级教程

W3School 简体中文版提供的内容仅用于培训和测试,不保

返回列表