如何在 JavaScript 中获取用户位置的经纬度？

可以使用 getCurrentPosition() 方法找到用户当前的位置。HTML5 提供的地理位置 API 允许我们知道用户的地理位置。地理位置 API 提供用户当前位置的经纬度，然后通过 JavaScript 传递到后端并在网站上显示。

GeolocationCoordinates 接口的只读 longitude 属性是一个双精度浮点值，表示位置的经度，以十进制度表示。

GeolocationCoordinates 对象是 GeolocationPosition 接口的一部分，因为它是 Geolocation API 调用传递的对象类型，这些调用收集并传递地理位置，以及提供测量时间的 DOMTimeStamp。

语法

navigator.geolocation.getCurrentPosition(success, error, options);

参数 - 它包含三个参数，如下所示，并在上面详细说明

  • success - 当 getCurrentPosition() API 方法的数据成功收集时，使用此函数。

  • error - 它还包含一个回调函数，用于发送位置的警告和错误。

  • options - 设置计时器、启用高精度和最大年龄很有帮助。

值

以十进制度表示的 longitude 值表示 Coordinates 对象描述的地球上的精确位置。1984 年的世界大地测量系统定义指定了该值 (WGS 84)。

示例 1

以下示例使用用户的地理位置来演示 Geolocation getCurrentPosition() 方法。

<!DOCTYPE html>
<html>
<title>Latitude and longitude of the user's position in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <h1 style="color: rgba(14, 21, 126, 0.908)">Welcome To Tutorialspoint!</h1>
   <h3>Click the button to identify the users location</h3>
   <div>
      <button onclick="myGeolocator()">
         Get location
      </button>
      <div id="result"></div>
   </div>   
   <script>
      let result = document.getElementById("result");
      let userLocation = navigator.geolocation;
      function myGeolocator() {
         if(userLocation) {
            userLocation.getCurrentPosition(success);
         } else {
            "The geolocation API is not supported by your browser.";
         }
      }
      function success(data) {
         let lat = data.coords.latitude;
         let long = data.coords.longitude;
         result.innerHTML = "Latitude: "
         + lat
         + "<br>Longitude: "
         + long;
      }
   </script>
</body>
</html>

示例 2

在这个例子中，让我们了解如何获取精度和时间戳。

<!DOCTYPE html>
<html>
<title>Latitude and longitude of the user's position in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <h1 style="color: rgba(14, 21, 126, 0.908)">Welcome To Tutorialspoint!</h1>
   <h3>Click the button to get accuracy and timestamp of the users location</h3>
   <div>
      <button onclick="myGeolocator()">
         Get accuracy and timestamp
      </button>
      <div id="result"></div>
   </div>   
   <script>
      let result = document.getElementById("result");
      let userLocation = navigator.geolocation;
      function myGeolocator() {
         if (userLocation) {
            userLocation.getCurrentPosition(success);
         } else {
            "The geolocation API is not supported by your browser";
         }
      }
      function success(data) {
         let accur = data.coords.accuracy;
         let timstamp = data.timestamp;
         result.innerHTML = "Accuracy: "
         + accur
         + "<br>Time Stamp: "
         + timstamp;
      }
   </script>
</body>
</html>

更新于: 2022年8月23日

3K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告