Comments: What we want to learn today is to use Geolocation to implement the positioning function. We can use navigator. geolocation to obtain the Geolocation object. If you are interested, we will learn how to use Geolocation to implement the location function. We can obtain the geolocation object through navigator. Geolocation, which provides the following methods:
GetCurrentPosition (callback, errorCallback, options): Get the current position;
WatchPosition (callback, error, options): Start to monitor the current position;
ClearWatch (id): stops monitoring the current location.
Note: The browser used in the following example is chrome. I cannot guarantee that the running result is consistent with the result displayed in the example using other browsers.
1. Get the current location
We will use the getCurrentPosition method to obtain the current position, and the location information will not be directly returned as a result. We need to use the callback function for processing. There may be some latency in obtaining coordinates, and you will be asked for access permissions. Let's take a look at the following example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
Table {border-collapse: collapse ;}
Th, td {padding: 4px ;}
Th {text-align: right ;}
</Style>
</Head>
<Body>
<Table border = "1">
<Tr>
<Th> longpolling: </th>
<Td id = "longpolling">-</td>
<Th> Latitude: </th>
<Td id = "latitude">-</td>
</Tr>
<Tr>
<Th> Altitude: </th>
<Td id = "altitude">-</td>
<Th> Accuracy: </th>
<Td id = "accuracy">-</td>
</Tr>
<Tr>
<Th> Altitude Accuracy: </th>
<Td id = "altitudeAccuracy">-</td>
<Th> Heading: </th>
<Td id = "heading">-</td>
</Tr>
<Tr>
<Th> Speed: </th>
<Td id = "speed">-</td>
<Th> Time Stamp: </th>
<Td id = "timestamp">-</td>
</Tr>
</Table>
<Script>
Navigator. geolocation. getCurrentPosition (displayPosition );
Function displayPosition (pos ){
Var properties = ['longput', 'latitude ', 'ubuntude', 'accuracy', 'ubuntudeaccuracy ', 'heading', 'speed'];
For (var I = 0, len = properties. length; I <len; I ++ ){
Var value = pos. coords [properties [I];
Document. getElementById (properties [I]). innerHTML = value;
}
Document. getElementById ('timestamp'). innerHTML = pos. timestamp;
}
</Script>
</Body>
</Html>
The returned position object contains two attributes: coords: Return coordinate information; timestamp: Time When coordinate information is obtained. Among them, coords includes the following attributes: latitude; longpolling: longitude; altitude: height; accuracy: precision (meter); altitudeAccuracy: height precision (meter); heading: traveling direction; speed: The travel speed (meter/second ).
Not all information is returned, depending on the device that carries the browser. Mobile devices like GPS, accelerators, and compass will return most of the information, and the home computer will not work. The location information obtained by the home computer depends on the network environment or wifi. The running result of the example is as follows.
Click Allow to obtain the coordinates.
2. Handling exceptions
Now we will introduce the Exception Handling of getCurrentPosition, which is implemented by using the errorCallback callback function. The parameter error returned by the function contains two attributes: code of the error Type and message of the error type. The code contains three values: 1: geolocation is not authorized by the user; 2: coordinate information cannot be obtained; 3: Information Retrieval timeout.
The following is an example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
Table {border-collapse: collapse ;}
Th, td {padding: 4px ;}
Th {text-align: right ;}
</Style>
</Head>
<Body>
<Table border = "1">
<Tr>
<Th> longpolling: </th>
<Td id = "longpolling">-</td>
<Th> Latitude: </th>
<Td id = "latitude">-</td>
</Tr>
<Tr>
<Th> Altitude: </th>
<Td id = "altitude">-</td>
<Th> Accuracy: </th>
<Td id = "accuracy">-</td>
</Tr>
<Tr>
<Th> Altitude Accuracy: </th>
<Td id = "altitudeAccuracy">-</td>
<Th> Heading: </th>
<Td id = "heading">-</td>
</Tr>
<Tr>
<Th> Speed: </th>
<Td id = "speed">-</td>
<Th> Time Stamp: </th>
<Td id = "timestamp">-</td>
</Tr>
<Tr>
<Th> Error Code: </th>
<Td id = "errcode">-</td>
<Th> Error Message: </th>
<Td id = "errmessage">-</td>
</Tr>
</Table>
<Script>
Navigator. geolocation. getCurrentPosition (displayPosition, handleError );
Function displayPosition (pos ){
Var properties = ["longpolling", "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;
}
</Script>
</Body>
</Html>
Deny authorization. Running result:
3. optional parameter items using geolocation
Options in getCurrentPosition (callback, errorCallback, options) can be used with the following parameters: enableHighAccuracy: the best effect; timeout: timeout (milliseconds); maximumAge: Specifies the cache time (milliseconds ). Let's take the following example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
Table {border-collapse: collapse ;}
Th, td {padding: 4px ;}
Th {text-align: right ;}
</Style>
</Head>
<Body>
<Table border = "1">
<Tr>
<Th> longpolling: </th>
<Td id = "longpolling">-</td>
<Th> Latitude: </th>
<Td id = "latitude">-</td>
</Tr>
<Tr>
<Th> Altitude: </th>
<Td id = "altitude">-</td>
<Th> Accuracy: </th>
<Td id = "accuracy">-</td>
</Tr>
<Tr>
<Th> Altitude Accuracy: </th>
<Td id = "altitudeAccuracy">-</td>
<Th> Heading: </th>
<Td id = "heading">-</td>
</Tr>
<Tr>
<Th> Speed: </th>
<Td id = "speed">-</td>
<Th> Time Stamp: </th>
<Td id = "timestamp">-</td>
</Tr>
<Tr>
<Th> Error Code: </th>
<Td id = "errcode">-</td>
<Th> Error Message: </th>
<Td id = "errmessage">-</td>
</Tr>
</Table>
<Script>
Var options = {
EnableHighAccuracy: false,
Timeout: 2000,
MaximumAge: 30000
};
Navigator. geolocation. getCurrentPosition (displayPosition, handleError, options );
Function displayPosition (pos ){
Var properties = ["longpolling", "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;
}
</Script>
</Body>
</Html>
4. Monitor location changes
The following describes how to monitor location changes using the watchPosition method, which is the same as getCurrentPosition. Let's look at the example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
Table {border-collapse: collapse ;}
Th, td {padding: 4px ;}
Th {text-align: right ;}
</Style>
</Head>
<Body>
<Table border = "1">
<Tr>
<Th> longpolling: </th>
<Td id = "longpolling">-</td>
<Th> Latitude: </th>
<Td id = "latitude">-</td>
</Tr>
<Tr>
<Th> Altitude: </th>
<Td id = "altitude">-</td>
<Th> Accuracy: </th>
<Td id = "accuracy">-</td>
</Tr>
<Tr>
<Th> Altitude Accuracy: </th>
<Td id = "altitudeAccuracy">-</td>
<Th> Heading: </th>
<Td id = "heading">-</td>
</Tr>
<Tr>
<Th> Speed: </th>
<Td id = "speed">-</td>
<Th> Time Stamp: </th>
<Td id = "timestamp">-</td>
</Tr>
<Tr>
<Th> Error Code: </th>
<Td id = "errcode">-</td>
<Th> Error Message: </th>
<Td id = "errmessage">-</td>
</Tr>
</Table>
<Button id = "pressme"> Cancel Watch </button>
<Script>
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 = ["longpolling", "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;
}
</Script>
</Body>
</Html>
Click the Cancel Watch Button to stop monitoring.
Demo: Html5Guide.Geolocation.zip
