Use a Cabeça! HTML5 Programming   Ingles
610 pág.

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.062 materiais17.811 seguidores
Pré-visualização50 páginas
watchPosition method actually looks just 
like the getCurrentPosition method, but behaves a little differently: it repeatedly 
calls your success handler each time your position changes. Let\u2019s see how it works.
Browser position.coords.latitude
position.coords.longitude
www.it-ebooks.info
you are here 4 193
making your html location aware
Getting the app started
We\u2019re going to use our previous code as a starting point; first we\u2019re going 
to add a couple of buttons to the HTML so that we can start and stop 
the tracking of your location. Why do we need the buttons? Well, first 
of all, users don\u2019t want to be tracked all the time and they usually want 
some control over that. But there\u2019s another reason: constantly checking 
your position is an energy-intensive operation on a mobile device and 
if it\u2019s left on all the time, it will cause your battery life to suffer. So, first, 
we\u2019ll update the HTML to add a form and two buttons: one to start 
watching your position and one to stop.
<!doctype html>
<html>
<head>
 <meta charset=&quot;utf-8&quot;>
 <title>Wherever you go, there you are</title>
 
 <link rel=&quot;stylesheet&quot; href=&quot;myLoc.css&quot;>
</head>
<body>
 <form>
 <input type=&quot;button&quot; id=&quot;watch&quot; value=&quot;Watch me&quot;>
 <input type=&quot;button&quot; id=&quot;clearWatch&quot; value=&quot;Clear watch&quot;>
 </form>
 <div id=&quot;location&quot;>
 Your location will go here.
 </div>
 <div id=&quot;distance&quot;>
 Distance from WickedlySmart HQ will go here.
 </div>
 <div id=&quot;map&quot;>
 </div>
</body>
</html>
We\u2019re adding a form 
element with two 
buttons, one to start 
the watch, with an 
id of \u201cwatch\u201d, and 
one to clear the 
watch, with an id of 
\u201cclearWatch\u201d.
We\u2019re going to reuse our old <div>s to report 
on the real-time location information.
Tracking a user in real time can be a 
real battery drainer. Make sure you 
give the user information about their 
tracking, and some control over it, too.
We\u2019ll come back and worry about 
the Google map in a bit...
www.it-ebooks.info
194 Chapter 5
using watchposition
So now we need to add button click handlers for the two buttons. We\u2019ll add them to 
the getMyLocation function only if there is geolocation support. And, since we\u2019re 
going to control all the geolocation tracking using the two buttons, we\u2019ll remove the 
existing call to getCurrentPosition from getMyLocation. Let\u2019s go ahead and 
remove that code, and add two handlers: watchLocation for the watch button, and 
clearWatch for the clear button:
Reworking our old code...
If the browser supports geolocation, we\u2019ll add our button click handlers. No point in adding them if geolocation isn\u2019t supported.
At this point, here\u2019s what we\u2019re trying to do: when the user clicks on the watch button, they 
want to start tracking their position. So, we\u2019ll use the the geolocation.watchPosition 
method to start watching their position. The geolocation.watchPosition method has 
two parameters, a success handler and an error handler, so we\u2019ll reuse the ones we already 
have. It also returns a watchId, which can be used at any time to cancel the watching 
behavior. We\u2019re going to stash the watchId in a global variable, which we\u2019ll use when 
we write the click handler for the clear button. Here\u2019s the code for the watchLocation 
function and the watchId, go ahead and add this code to myLoc.js:
function getMyLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(displayLocation,displayError);
 var watchButton = document.getElementById(&quot;watch&quot;);
 watchButton.onclick = watchLocation;
 var clearWatchButton = document.getElementById(&quot;clearWatch&quot;);
 clearWatchButton.onclick = clearWatch;
 }
 else {
 alert(&quot;Oops, no geolocation support&quot;);
 }
}
We\u2019re going to call 
watchLocation to start the 
watch, and clearWatch to stop it.
Writing the watchLocation handler
var watchId = null; 
function watchLocation() {
 watchId = navigator.geolocation.watchPosition(displayLocation, 
 displayError);
}
Add watchId at the top of your file as a global variable. We\u2019re 
initializing it to null. We\u2019ll need this later to clear the watch.
We\u2019re calling the watchPosition method, passing the success handler we\u2019ve already written, displayLocation and our existing error handler, displayError.
www.it-ebooks.info
you are here 4 195
making your html location aware
function clearWatch() {
 if (watchId) {
 navigator.geolocation.clearWatch(watchId);
 watchId = null;
 }
}
...call the geolocation.clearWatch 
method, passing in the watchId. 
This stops the watching.
Writing the clearWatch handler
Now let\u2019s write the handler to clear the watching activity. To do that we need to take the 
watchId and pass it to the geolocation.clearWatch method.
We still need to make a small update to displayLocation...
function displayLocation(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 var div = document.getElementById(&quot;location&quot;);
 div.innerHTML = &quot;You are at Latitude: &quot; + latitude + &quot;, Longitude: &quot; + longitude;
 div.innerHTML += &quot; (with &quot; + position.coords.accuracy + &quot; meters accuracy)&quot;;
 var km = computeDistance(position.coords, ourCoords);
 var distance = document.getElementById(&quot;distance&quot;);
 distance.innerHTML = &quot;You are &quot; + km + &quot; km from the WickedlySmart HQ&quot;;
 if (map == null) {
 showMap(position.coords);
 }
}
There\u2019s one small change we need to make and it involves the Google Maps code 
we previously wrote. In this code we call showMap to display the Google Map. 
Now, showMap creates a new map in your page, and that is something you only 
want to do one time. But remember, when you start watching your location with 
watchPosition, displayLocation is going to get called every time there is an 
update to your position. 
To make sure we only call showMap once, we\u2019ll first test to see if the map exists and 
if it doesn\u2019t, we\u2019ll call showMap. Otherwise, showMap has already been called (and 
has already created the map) and we don\u2019t need to call it again.
If we haven\u2019t called showMap already, then 
call it, otherwise we don\u2019t need to call it 
every time displayLocation is called.
Make sure there\u2019s a watchId and then...
www.it-ebooks.info
196 Chapter 5
testing user tracking
Time to get moving!
Make sure you\u2019ve got all the new code typed in and reload your page, myLoc.html. 
Now, to truly test this page you\u2019re going to need to \u201crelocate\u201d to have your position 
updated. So take a walk, jump on your bike, get in the car, or use whatever your 
favorite mode of transportation might be. 
It almost goes without saying that if you\u2019re running this on your desktop, this app is 
going to be pretty boring (since you can\u2019t take it with you), so you really need to use 
a mobile device for this test. And, if you need help getting to a hosted version with 
your mobile device, we\u2019ve placed a copy of this code at: 
http://wickedlysmart.com/hfhtml5/chapter5/watchme/myLoc.html. 
Here\u2019s our test run...
These numbers 
will update as 
you move around.
Try online: http://wickedlysmart.com/hfhtml5/chapter5/watchme/myLoc.html
Note the map is just going 
to center on your initial 
location, for now...
www.it-ebooks.info
you are here 4 197
making your html location aware
Q: How can I control the rate at which the browser is 
providing updates of my location when using watchPosition?
A: You can\u2019t. The browser determines what the optimal update 
rate is and decides when you\u2019ve changed positions.
Q: Why does my location change a few times when I first 
load