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
var km = computeDistance(position.coords, ourCoords);
 var distance = document.getElementById("distance");
 distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
 if (map == null) {
 showMap(position.coords);
 } else {
 scrollMapToPosition(position.coords);
 }
}
After that, all we need to do is add a new 
marker to the existing map.
Now, all we need to do is update the displayLocation function 
to call scrollMapToPosition each time your position changes. 
Remember that the first time displayLocation is called, we\u2019re 
calling showMap to create the map and display a marker for 
your initial location. Each time after that we just need to call 
scrollMapToPosition to add a new marker and re-center the 
map. Here\u2019s the code change:
Reload your page and start moving around... is your 
map following you? You should see a trail of markers 
being added to your map as you move (unless you\u2019re 
sitting at your desktop!).
So, we submit this application as solid proof that 
\u201cwherever you go, there you are.\u201d 
The first time displayLocation is called, we need 
to draw the map and add the first marker.
And one more time...
Our trail of markers 
on a recent trip 
from Wickedly 
Smart HQ to the 
secret underground 
lair...oh wait, we 
shouldn\u2019t have said 
that...
Try online: http://wickedlysmart.com/hfhtml5/chapter5/watchmepan/myLoc.html
Integrating our new function
www.it-ebooks.info
206 Chapter 5
optimizing marker usage
var ___________________;
function displayLocation(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 var div = document.getElementById("location");
 div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
 div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
 var km = computeDistance(position.coords, ourCoords);
 var distance = document.getElementById("distance");
 distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
 if (map == null) {
 showMap(position.coords);
 prevCoords = ________________;
 } else {
 var meters = ________________(position.coords, prevCoords) * 1000;
 if (___________ > ______) {
 scrollMapToPosition(position.coords);
 ______________ = _______________;
 }
 } 
}
prevCoords
prevCoords = null;
position.coords
computeDistance
20
meters
Whoa, can you say marker explosion?
Code Magnets
Before we conclude this chapter, we thought you might want 
to really polish up this app. You might have noticed (under 
some circumstances) that there are just a few too many 
markers being added to the map when you\u2019re watching your 
position? 
What\u2019s happening is that watchPosition is detecting 
movement frequently, so it\u2019s calling the displayLocation 
success handler every few steps or so. One way to fix that 
is to add some code so we have to move some significant 
distance, say 20 meters for testing purposes, before we create 
a new marker. 
We already have a function that will compute the distance 
between two coordinates (computeDistance), so all we 
need to do is save our position each time displayLocation is 
called, and check to see if the distance between the previous 
position and the new position is greater than 20 meters 
before calling scrollMapToPosition. You\u2019ll find some of the 
code below to do that; it\u2019s your job to finish it. Watch out, 
you\u2019ll have to use some magnets more than once!
www.it-ebooks.info
you are here 4 207
making your html location aware
 ƒ Geolocation is not \u201cofficially\u201d part of the 
HTML5 specification, but it\u2019s considered 
part of the \u201cfamily\u201d of HTML5 specs.
 ƒ There are a variety of ways to determine 
your location, depending on the device you 
have.
 ƒ GPS is a more accurate method of getting 
your location than cell tower triangulation or 
network IP.
 ƒ Mobile devices without GPS can use cell 
tower triangulation to determine location.
 ƒ The Geolocation API has three methods 
and a few properties.
 ƒ The primary method in the Geolocation 
API is getCurrentPosition, a method of the 
navigator.geolocation object.
 ƒ getCurrentPosition has one required 
parameter, the success handler, and two 
optional parameters, the error handler, and 
the options.
 ƒ A position object is passed to the success 
handler with information about your 
location, including your latitude and 
longitude.
 ƒ The position object contains a coords 
property, which is a coordinates object.
 ƒ The coordinates object has properties 
including latitude, longitude and accuracy.
 ƒ Some devices may support the other 
coordinates properties: altitude, 
altitudeAccuracy, heading, and speed.
 ƒ Use the accuracy property to determine 
how accurate your location is in meters. 
 ƒ When getCurrentPosition is called, your 
browser must verify that you have given 
permission to share your location.
 ƒ watchPosition is a method of the 
geolocation object that monitors your 
location and calls a success handler when 
your location changes.
 ƒ Like getCurrentPosition, watchPosition has 
one required parameter, a success handler, 
and two optional parameters, an error 
handler and options.
 ƒ Use clearWatch to stop monitoring your 
location.
 ƒ When watchPosition is used, your device 
will require more energy, so your battery life 
may be shortened.
 ƒ The third parameter, options, for 
getCurrentPosition and watchPosition, is an 
object with properties you set to control the 
behavior of the Geolocation API.
 ƒ The maximumAge property determines 
whether getCurrentPosition will use a 
cached position, and if so, how old that 
position can be before a fresh position is 
required.
 ƒ The timeout property determines how much 
time getCurrentPosition has to get a fresh 
position before the error handler is called. 
 ƒ The enableHighAccuracy property gives a 
hint to devices to spend more effort getting 
a highly accurate location if possible. 
 ƒ You can use the Geolocation API with the 
Google Maps API to place your location on 
a map.
www.it-ebooks.info
208 Chapter 5
exercise solutions
HTML5cross
You\u2019ve traveled quite far in this chapter 
with your first JavaScript API. Make it 
stick with this crossword.
1 2
3
4
5
6 7
8
9 10
11
Across
4. Longitude is measured from _____________, England.
7. Accuracy has implications for your app because it can affect 
_________ life.
8. If you say no when your browser asks you to share your 
location, your error handler will be called with an _________ 
code of 1.
9. \u201cWherever you go, there you are\u201d was mentioned in the 
movie _______________________. 
10. Don\u2019t give driving directions to someone if your 
coordinates don\u2019t have a good ________________.
11. The secret location of the __________________ HQ is 
47.62485, -122.52099.
Down
1. Re-center your map using the___________ method.
2. Old Skool devices without GPS use cell tower 
_______________ to determine your location.
3. The latitude, longitude of ___________ is 40.77, -73.98.
5. You\u2019ll never get a cached location if you set 
_____________ to 0.
6. You can use the _______________ equation to find the 
distance between two coordinates.
Across
4. Longitude is measured from _____________, England.
7. Accuracy has implications for your app because it can 
affect _________ life.
8. If you say no when your browser asks you to share your 
location, your error handler will be called with 
an _________ code of 1.
9. \u201cWherever you go, there you are\u201d was mentioned in the 
movie _______________________.
10. Don\u2019t give driving directions to someone if your