HTML 地理位置 watchPosition() 方法

在本文中，我们将讨论 Geolocation watchPosition() 方法。 HTML 中的地理定位用于注册一个处理函数，该处理函数将在每次设备位置发生变化时自动调用。

句法：

navigator.geolocation.watchPosition(showLoc, error, options);

范围：

• showLoc：也是一个成功信息的函数，会显示纬度、经度、时间戳等
• error：如果适用，它将返回位置的错误消息和警告
• options：用于设置 enableHighAccuracy、timeout、maximumAge

其中showLoc成功消息包括以下内容：

• 纬度：此属性将返回给定位置的纬度
• 经度：此属性将返回给定位置的经度
• 时间戳：此属性将返回给定位置的时间戳
• speed：此属性将返回给定位置的速度
• 高度：此属性将返回给定位置的海平面以上的高度
• 精度：此属性将返回给定位置的海平面以上的精度

示例：本示例显示 watchPosition() 方法的经纬度。

HTML

 

    
    

 

    GeeksforGeeks
     
 Displaying Latitude and Longitude
 
    Click Me
    
 
 
    
 
 
    
        var variable1 = document.getElementById("paraID");
        var variable2 = document.getElementById("paraID1");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Latitude: " +
                pos.coords.latitude;
 
            variable2.innerHTML = "Longitude: " +
                pos.coords.longitude;
        }
    

 

输出：

示例 2：显示时间戳

HTML

 

    
    

 

    GeeksforGeeks
     
 Displaying Timestamp
 
    Click Me
    
 
 
    
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Timestamp: " +
                pos.timestamp;
        }
    

 

输出：

示例 3：显示速度

HTML

 

    
    

 

    GeeksforGeeks
     
 Displaying Timestamp
 
    Click Me
    
 
 
    
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Timestamp: " +
                pos.timestamp;
        }
    

 

输出：

示例 4：显示高度

HTML

 

    
    

 

    GeeksforGeeks
     
 Displaying Altitude
 
    Click Me
    
 
 
    
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Altitude: " +
                pos.coords.altitude;
        }
    

 

输出：

示例 5：显示精度

HTML

 

    GeeksforGeeks
     
 Displaying Accuracy
 
    Click Me
    
 
 
    
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Accuracy: " +
                pos.coords.accuracy;
        }
    

 

输出：