HTML and CSS Reference
In-Depth Information
The
click
event-handler function defines an
options
object with three settings:
enableHighAccuracy
,
timeout
, and
maximumAge
. This object specifies the options to be used by the
getCurrentPosition()
method.
The significance of these three options is described in Table 12-2.
Table 12-2.
Options for the
getCurrentPosition()
Method
Option
Description
enableHighAccuracy
Boolean option that indicates whether to use the high-accuracy GPS technique to
find the user's location. A value of
true
indicates that GPS is to be used if available.
Of course, the device must have GPS support as well as the user's permission to
use this mode. Otherwise, this setting is ignored.
timeout
Indicates the number of milliseconds the web page should wait before giving up
location detection.
maximumAge
Indicates how much old cached location data can be used. The value is in
milliseconds. The default is
0
, indicating that cached data is never used. You may
set this option if you wish to reduce the number of geolocation calls or save power.
However, the downside of setting
maximumAge
is that the location information can
be outdated, in which case the specified value may cause calculation errors.
The code in Listing 12-1 then calls the
geolocation
object's
getCurrentPosition()
method. This
method accepts three parameters: a
success
function that is called when the geolocation data is
successfully retrieved, an
error
function that is called if an error occurs while retrieving the geolocation
information, and the
options
object. Specifying the
error
function and
options
object is optional.
The
OnSuccess()
function that acts as a success callback is shown in Listing 12-2.
Listing 12-2.
OnSuccess()
Callback Function
function OnSuccess(position) {
var html = "";
html += "<tr><td>Latitude : </td>";
html += "<td>" + position.coords.latitude + "</td></tr>";
html += "<tr><td>Longitude : </td>";
html += "<td>" + position.coords.longitude + "</td></tr>";
html += "<tr><td>Accuracy : </td>";
html += "<td>" + position.coords.accuracy + "</td></tr>";
html += "<tr><td>Altitude : </td>";
html += "<td>" + position.coords.altitude + "</td></tr>";
html += "<tr><td>Altitude Accuracy : </td>";
html += "<td>" + position.coords.altitudeAccuracy + "</td></tr>";
html += "<tr><td>Heading : </td>";
html += "<td>" + position.coords.heading + "</td></tr>";
html += "<tr><td>Speed : </td>";
html += "<td>" + position.coords.speed + "</td></tr>";
html += "<tr><td>Timestamp : </td>";
html += "<td>" + new Date(position.timestamp).toString() + "</td></tr>";
$("#tblInfo").append(html);
}
OnSuccess()
receives a
position
object that provides information about the user's location including
latitude and longitude. Most of these properties (except the timestamp) are available in the
position
object's
coords
property. The pieces of information given by the
position
object are listed in Table 12-3.