如何定位用户在 HTML 中的位置？

在本文中，我们将讨论如何在 HTML 中定位用户的位置。

方法： getCurrentPosition()方法用于定位用户的当前位置。HTML5为我们提供了Geolocation API，帮助我们识别用户的地理位置。 Geolocation API 提供用户当前位置的经纬度，这些信息通过 JavaScript 进一步发送到后端，然后用户的当前位置会显示在网站上。

句法：

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

参数：它具有上述三个参数，如下所述：

• success ：API 的 getCurrentPosition() 方法成功收集数据后调用的函数。
• error ：它也是一个回调函数，返回位置的警告和错误消息。
• options ：它可以帮助我们设置超时、enableHighAccuracy 和 maximumAge。

示例：下面的示例通过检查用户的地理位置来说明 Geolocation getCurrentPosition() 方法。

HTML

    Welcome To GFG
    How to locate the user's position in HTML?
    
        
          Click to get location
        
        
  
  
    
    
        var paraGraph = document.getElementById("paraGraph");
        var user_loc = navigator.geolocation;
      
        function geolocator() {
            if(user_loc) {
                user_loc.getCurrentPosition(success);
            } else {
                "Your browser doesn't support geolocation API";
            }
        }
      
        function success(data) {
            var lat = data.coords.latitude;
            var long = data.coords.longitude;
            paraGraph.innerHTML = "Latitude: "
            + lat
            + "<br>Longitude: "
            + long;
        }
    

  

输出：

示例 2：

HTML

  

    Welcome To GFG
    
        
            Click to get accuracy and timestamp
        
        
  
  
    
    
        var paraGraph = document.getElementById("paraGraph");
        var user_loc = navigator.geolocation;
  
        function geolocator() {
            if (user_loc) {
                user_loc.getCurrentPosition(success);
            } else {
                "Your browser doesn't support geolocation API";
            }
        }
  
        function success(data) {
            var accu = data.coords.accuracy;
            var tmstmp = data.timestamp;
            paraGraph.innerHTML = "Accuracy: "
                + accu
                + "<br>Time Stamp: "
                + tmstmp;
        }
    

  

输出：