HTML and CSS Reference
In-Depth Information
</body>
</html>
This example uses jQuery for DOM manipulation, and
enableHighAccuracy
is set to true to get as ac-
curate a position as possible.
Watching the Position Change over Time
The geolocation API provides a second method called
watchPosition
that takes in the same parameters as
getCurrentPosition
. It works like
setInterval
in that it returns an ID that can be used to clear the
watch at a later time with
clearWatch
.
If you want to walk around a bit, run the code in
Listing 23-3
, which uses
watchPosition
to log the lat-
itude and longitude to a
<div>
on a mobile browser and see how the numbers change.
Listing 23-3:
Watching the position change
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Watching the position</title>
<script src='js/jquery.min.js'></script>
</head>
<body>
<script>
function logPosition(position) {
$("#logs").prepend(position.coords.latitude + "," +
position.coords.latitude + "<br/>");
}
function positionError(error) {
console.log(error);
}
var watchID = navigator.geolocation.watchPosition(
logPosition,positionError,{
enableHighAccuracy: true
});
setTimeout(function() {
navigator.geolocation.clearWatch(watchID);
},30000);
</script>
<div id='logs'></div>
</body>
</html>
You can see that after 30 seconds the watch is cleared to prevent the system from continuing to update the
position.
