参考手册
Javascript Web API
JavaScript Fetch API
返回 Javascript Web API

Web Geolocation（地理位置） API

定位用户的位置

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

由于这会损害隐私，因此除非用户批准，否则该功能不可用。

地理定位对于带有 GPS 的设备来说是最精确的，比如智能手机。

Geolocation API 支持所有浏览器:

YesYesYesYesYes
注意：从 Chrome 50 开始，地理定位 API 将只在 HTTPS 等安全上下文上工作。如果您的站点位于非安全源（如 HTTP）上，则获取用户位置的请求将不再有效。

使用 Geolocation API

getCurrentPosition()方法用于返回用户的位置。

下面的示例返回用户位置的纬度和经度:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript Geolocation API</h2>
  6. <p>点击按钮获取你的经纬度</p>
  8. <button onclick="getLocation()">试一试</button>
  10. <p id="demo">
  12. <script>
  13. const x = document.getElementById("demo");
  15. function getLocation() {
  16.   if (navigator.geolocation) {
  17.     navigator.geolocation.getCurrentPosition(showPosition);
  18.   } else {
  19.     x.innerHTML = "浏览器不支持 Geolocation ";
  20.   }
  21. }
  23. function showPosition(position) {
  24.   x.innerHTML = "经度: " + position.coords.longitude + 
  25.   "<br>纬度: " + position.coords.latitude;
  26. }
  27. </script>
  29. </body>
  30. </html>
运行一下

举例说明：

  • 检查是否支持地理定位
  • 如果支持，请运行 getCurrentPosition() 方法。如果不是，则向用户显示消息
  • 如果 getCurrentPosition() 方法成功，它将坐标对象返回给参数（showPosition）中指定的函数
  • 函数的作用是：输出纬度和经度

上面的示例是一个非常基本的地理定位的脚本，没有错误处理机制。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它指定在无法获取用户位置时要运行的函数:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript Geolocation API</h2>
  6. <p>点击按钮获取你的经纬度</p>
  8. <button onclick="getLocation()">试一试</button>
  10. <p id="demo">
  12. <script>
  13. const x = document.getElementById("demo");
  15. function getLocation() {
  16.   if (navigator.geolocation) {
  17.     navigator.geolocation.getCurrentPosition(showPosition, showError);
  18.   } else {
  19.     x.innerHTML = "浏览器不支持 Geolocation ";
  20.   }
  21. }
  23. function showPosition(position) {
  24.   x.innerHTML = "经度: " + position.coords.longitude + 
  25.   "<br>纬度: " + position.coords.latitude;
  26. }
  28. function showError(error) {
  29.   switch(error.code) {
  30.     case error.PERMISSION_DENIED:
  31.       x.innerHTML = "用户拒绝 Geolocation 请求"
  32.       break;
  33.     case error.POSITION_UNAVAILABLE:
  34.       x.innerHTML = "定位信息不可用"
  35.       break;
  36.     case error.TIMEOUT:
  37.       x.innerHTML = "请求用户位置超时"
  38.       break;
  39.     case error.UNKNOWN_ERROR:
  40.       x.innerHTML = "发生未知错误"
  41.       break;
  42.   }
  43. }
  44. </script>
  46. </body>
  47. </html>
运行一下

在地图上展示结果

要在地图中显示结果，您需要访问地图服务，如百度地图。

在下面的示例中，返回的纬度和经度用于在百度地图中显示位置（使用静态图像）:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <script src="https://api.map.baidu.com/api?&v=1.0&ak=t5EoOoZ5CKssc31QvjpySYdBT1ADb8T6"></script>
  6. <h2>JavaScript Geolocation API</h2>
  7. <p>点击按钮获取你的经纬度</p>
  9. <button onclick="getLocation()">试一试</button>
  11. <div id="container" style="width:100%;height:350px;"></div>
  13. <script>
  14. const x = document.getElementById("demo");
  16. function getLocation() {
  17.   if (navigator.geolocation) {
  18.     navigator.geolocation.getCurrentPosition(showPosition);
  19.   } else {
  20.     x.innerHTML = "浏览器不支持 Geolocation ";
  21.   }
  22. }
  24. function showPosition(position) {
  25.   var map = new BMap.Map("container"); // 创建地图实例
  26.   var point = new BMap.Point(position.coords.longitude,position.coords.latitude);// 创建点坐标
  27.   map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  28. }
  30. </script>
  32. </body>
  33. </html>
运行一下

特定位置信息

本页演示了如何在地图上显示用户的位置。

Geolocation（地理定位）对于特定位置的信息也非常有用，例如：

  • 最新本地信息
  • 显示用户附近的兴趣点
  • 逐路段导航（GPS）

getCurrentPosition() 方法 - 返回数据

getCurrentPosition() 方法在成功时返回一个对象。始终返回纬度、经度和精确度属性。如果可用，则返回其他属性:

PropertyReturns
coords.latitude以十进制数字表示的纬度（始终返回）
coords.longitude以十进制数表示的经度（始终返回）
coords.accuracy位置的估算精度（始终返回）
coords.altitude平均海平面以上的海拔高度（如有返回）
coords.altitudeAccuracy位置高度的估算精度（如果可用，返回）
coords.heading航向为从北顺时针方向的度数（如果可用，返回）
coords.speed以米/秒为单位的速度（如果可用，返回）
timestamp响应的日期/时间（如果可用，返回）

Geolocation 对象 - 其他方法

地理定位对象还有其他有趣的方法：

  • watchPosition() - 返回用户的当前位置，并在用户移动时继续返回更新的位置（如汽车中的 GPS ）。
  • clearWatch() -停止 watchPosition() 方法。

下面的示例显示了 watchPosition() 方法。你需要一个精确的 GPS 设备来测试这一点（比如智能手机）:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript Geolocation API</h2>
  6. <p>点击按钮获取你的经纬度</p>
  8. <button onclick="getLocation()">试一试</button>
  10. <p id="demo">
  12. <script>
  13. const x = document.getElementById("demo");
  15. function getLocation() {
  16.   if (navigator.geolocation) {
  17.     navigator.geolocation.watchPosition(showPosition);
  18.   } else {
  19.     x.innerHTML = "浏览器不支持 Geolocation ";
  20.   }
  21. }
  23. function showPosition(position) {
  24.     x.innerHTML="经度: " + position.coords.longitude + 
  25.     "<br>纬度: " + position.coords.latitude;
  26. }
  27. </script>
  29. </body>
  30. </html>
运行一下
注意： 请不要使用 Chrome 来运行实例。建议使用 IE。
JavaScript Fetch API

分类导航