哪种方法可以用来获取用户在 HTML 中的当前位置？

在本文中，我们将讨论在 HTML 文档中获取用户当前位置的方法。我们将使用Navigator 地理定位属性来帮助我们实现它。 Navigator 地理位置属性 用于由浏览器返回一个地理定位对象，该对象可用于定位用户在 HTML 文档中的位置。它是只读属性，只有在用户批准后才可用，因为它可能会损害用户的隐私。

句法：

navigator.geolocation

为了获取用户的当前位置，我们将使用 Navigator 地理定位属性中可用的getCurrentPosition() 方法。 getCurrentPosition() 方法用于获取用户的当前位置。

句法：

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

参数值：

• 成功：这是一个在getCurrentPosition()方法成功收集数据后调用的函数。
• 错误：这是一个在发生一些警告或错误时执行的函数。
• options：这是一个帮助我们设置可选timeout 、 enableHighAccuracy或maximumAge属性的对象。

有关各种属性、方法及其实现的详细信息，请参阅 HTML Geolocation 文章。

示例 1：下面的示例说明了如何使用Geolocation getCurrentPosition()方法获取用户的当前位置。

HTML

 

    
        // Success function
        function successFunction(value) {
            var lat = value.coords.latitude;
            var long = value.coords.longitude;
            document.getElementById('error')
              .innerHTML = "";
            document.getElementById('latitude')
              .innerHTML = `Latitude: ${lat}`;
            document.getElementById('longitude')
              .innerHTML = `Latitude: ${long}`;
        }
 
        // Error Function
        function errorFunction(err) {
            document.getElementById('latitude')
              .innerHTML = "";
            document.getElementById('longitude')
              .innerHTML = "";
            document.getElementById('error')
              .innerHTML = `Error occurred: ${err.message}`;
        }
         
        // Main function to get location
        function getLocation() {
            navigator.geolocation
              .getCurrentPosition(
                successFunction, errorFunction
              );
        }
    

 

    
        
          GeeksforGeeks
        
        
            
              Get Location
            
            
            
            
        
    

 

输出：

示例 2：下面的示例说明了超时参数在 Geolocation getCurrentPosition() 方法中的工作原理。

HTML

 

    
        #timeout {
            width: 300px;
            height: 30px;
            margin: 10px;
            font-size: 20px;
        }
    
    
        // Success function
        function successFunction(value) {
            var lat = value.coords.latitude;
            var long = value.coords.longitude;
            document.getElementById('error')
              .innerHTML = "";
            document.getElementById('latitude')
              .innerHTML = `Latitude: ${lat}`;
            document.getElementById('longitude')
              .innerHTML = `Latitude: ${long}`;
        }
        // Error Function
        function errorFunction(err) {
            document.getElementById('latitude')
              .innerHTML = "";
            document.getElementById('longitude')
              .innerHTML = "";
            document.getElementById('error')
              .innerHTML = `Error occurred: ${err.message}`;
        }
        // Main function to get location
        function getLocation() {
            const timeOut = document
            .getElementById('timeout').value;
            const options = {
                timeout: timeOut == "" ? 5000 : timeOut
            }
            navigator
              .geolocation
              .getCurrentPosition(
                successFunction, errorFunction, options
              );
        }
    

 

   
        GeeksforGeeks
        
            
            
            
              Get Location
            
            
            
            
        
    

 

输出：