HTML5 code sharing using geolocation

1) Use geolocation:

Access the geolocation function through navigator.geolocation and return a Geolocation object ;

1.1) Geolocation object members:

getCurrentPosition(callback, errorCallback, options)——Get the current position;

watchPosition(callback,error,options)——Start monitoring the current position;

clearWatch(id)——Stop monitoring the current position;

1.1.1) The browser calls the callback function of getCurrentPosition Parameter , a position object providing location details will be passed in;

position object members:

coords——Returns the coordinates of the current location, that is, the Coordinates object;

##time stamp——Returns the time when coordinate information was obtained;

##Coordinates object members:

latitude——Returns the latitude expressed in decimal;

## longitude——Returns the longitude expressed in decimal;

## altitude——Returns the altitude expressed in meters;

accuracy——Returns the coordinate accuracy expressed in meters;

altitudeAccuracy - Returns the altitude accuracy expressed in meters;

heading—— Returns the direction of travel expressed in degrees;

Speed——Returns the travel speed expressed in meters per second;

2) Handling geolocation errors:

The second parameter of the getCurrentPosition(callback,errorCallback,options) method allows us to specify a function. It is called when an error occurs while retrieving the position. This function will obtain a PositionError object;

##PositionError object members:

code——Returns the code representing the error type;

## =1——The user is not authorized to use the geolocation function;

# =2——The location cannot be determined;

## =3 - The attempt to request the location has timed out;

## message——Returns a string describing the error;

##3) Specify geolocation options:

##

The third parameter provided by the getCurrentPosition(callback, errorCallback, options) method is a PositionOptions object.

##

Members of the PositionOptions object:

## enableHighAccuracy - tells the browser that we want to get the best possible results;

timeout——Event that limits the request location. After setting the number of milliseconds, a timeout error will be reported;

## maximumAge - tells the browser that we are willing to accept a cached location as long as it is no older than the specified number of milliseconds;

4) Monitoring location:

The watchPosition method continuously gets updates about the position. The required parameters are the same as the getCurrentPosition method and works the same way.

## The difference is: as the position changes, the callback function will be called repeatedly.

table{
    border-collapse: collapse;
}
 th,td{
     padding: 4px;
 }
 th{
     text-align: right;
 }

<table border="1">
    <tr>
        <th>经度：</th><td id="longitude">-</td>
        <th>纬度：</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>海拔高度：</th><td id="altitude">-</td>
        <th>坐标精度：</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>海拔精度：</th><td id="altitudeAccuracy">-</td>
        <th>行进方向：</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>速度：</th><td id="speed">-</td>
        <th>时间：</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>错误类型:</th><td id="errcode">-</td>
        <th>错误信息</th><td id="errormessage">-</td>
    </tr>
</table><pre name="code" class="html">    <button id="pressme">Cancel Watch</button>

var options={
    enableHighAccuracy:false,
    timeout:2000,
    maximumAge:30000
}
var WatchID=navigator.geolocation.watchPosition(displayPosition,handleError,options)
document.getElementById("pressme").onclick=function(e){
    navigator.geolocation.clearWatch(WatchID);
}
function displayPosition(pos){
    var properties=["longitude","latitude","altitude","accuracy","altitudeAccuracy","heading","speed"];
    for(var i=0;i<properties.length;i++){
        var value=pos.coords[properties[i]];
        document.getElementById(properties[i]).innerHTML=value;
    }
    document.getElementById("timestamp").innerHTML=pos.timestamp;
}
function handleError(err){
    document.getElementById("errcode").innerHTML=err.code;
    document.getElementById("errmessage").innerHTML=err.message;
}

The above is the detailed content of HTML5 code sharing using geolocation. For more information, please follow other related articles on the PHP Chinese website!