HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

JavaScript 中用户位置的经纬度?

front end technologyjavascriptobject oriented programming

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

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

GeolocationCoordinates 对象是 GeolocationPosition 接口的一个组件，因为它是由 Geolocation API 调用传递的对象类型，用于收集和传递地理位置，以及提供测量时间的 DOMTimeStamp。

语法

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

参数 − 它包含三个参数，如下所示，上面有详细说明:

  • 成功 − 这是在成功收集 getCurrentPosition() API 方法的数据时使用的函数。

  • 错误 − 它还包括一个回调函数，用于发回位置的警告和错误。

  • 选项 − 设置计时器、启用高精度和最大年龄很有用。

值

以十进制度指定的经度值表示 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>

相关文章

打印 下一节 ❯❮ 上一节