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
displayLocation,
 displayError,
 options);
Here are the options, 
written as a literal 
object right in the 
function call! Some would 
argue this is easier and 
more readable as code.
var options = {enableHighaccuracy: true, maximumage: 60000};
And then pass options to either getCurrentPosition or watchPosition, 
like this:
Or, we could just write the options object inline, like this:
navigator.geolocation.getCurrentPosition(
 displayLocation,
 displayError,
 {enableHighaccuracy: true, maximumage: 60000});
Here, we\u2019re just passing our options 
along using the options variable.
You\u2019ll see this 
technique used a lot 
in JavaScript code.
Now that you know the options, what they do, and how to specify them, we should use them. 
We\u2019re going to do that, but remember, these are meant to tune your application, which will 
have its own unique requirements. These options are also affected by your device, browser 
implementation and network, so you\u2019ll need to play on your own to fully explore them.
 
When you ran the diagnostics before, did you get the test case where you waited and waited and nothing 
happened? That\u2019s most likely because of the infinite timeout. In other words the browser will wait forever to get 
a location as long as it doesn\u2019t encounter some error condition. Well, now you know how to fix that, because we 
can force the Geolocation API to be a little more expedient by setting its timeout value. Here\u2019s how:
Test Drive Diagnostics Checkup
function watchLocation() {
 watchId = navigator.geolocation.watchPosition(
 displayLocation,
 displayError,
 {timeout:5000});
}
By setting timeout to 5000 milliseconds (5 
seconds) you\u2019re making sure the browser doesn\u2019t 
sit there forever trying to get a location.
Give it a try and feel free to 
adjust the option values.
Are you starting to see 
that JavaScript really 
rocks? Well, at least we 
think it does. 
www.it-ebooks.info
202 Chapter 5
Wouldn\u2019t it be fun to see how fast your browser can find your location? 
We could make it as hard for your browser as we can: 
ƒ let\u2019s ask it to enable high accuracy, 
ƒ let\u2019s not allow it to use a cache (by setting maximumAge to 0) 
ƒ let\u2019s time it by setting the timeout option to 100, and then increase 
the timeout every time it fails. 
Warning: we don\u2019t know if all devices and their batteries are up to this, 
so use at your own risk!
Here\u2019s what the intial options are going to look like:
Don\u2019t Try this at Home 
(PUSHING GEO TO THE LIMIT )
{enableHighaccuracy: true, timeout:100, maximumage:0}
{enableHighaccuracy: true, timeout:200, maximumage:0}
{enableHighaccuracy: true, timeout:300, maximumage:0}
We\u2019ll start here...
and if that fails give 
it more time...
and so on...
Now check out the code on the next page, you\u2019ll find it quite interesting. Go 
ahead and type it in\u2014you can just add it to your JavaScript in myLoc.js. Try 
it on your various devices and record your results here:
ON _________ FOUND IN _______________ milliseconds
Try online: http://wickedlysmart.com/hfhtml5/chapter5/speedtest/speedtest.html
ON _________ FOUND IN _______________ milliseconds
ON _________ FOUND IN _______________ milliseconds
ON _________ FOUND IN _______________ milliseconds
device here time here
www.it-ebooks.info
you are here 4 203
making your html location aware
var options = { enableHighaccuracy: true, timeout:100, maximumage: 0 };
window.onload = getMyLocation;
function getMyLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(
 displayLocation,
 displayError,
 options);
 } else {
 alert("Oops, no geolocation support");
 }
}
function displayError(error) {
 var errorTypes = {
 0: "Unknown error",
 1: "Permission denied",
 2: "Position is not available",
 3: "Request timeout"
 };
 var errorMessage = errorTypes[error.code];
 if (error.code == 0 || error.code == 2) {
 errorMessage = errorMessage + " " + error.message;
 }
 var div = document.getElementById("location");
 div.innerHTML = errorMessage;
 options.timeout += 100;
 navigator.geolocation.getCurrentPosition(
 displayLocation,
 displayError,
 options);
 div.innerHTML += " ... checking again with timeout=" + options.timeout;
}
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 += " (found in " + options.timeout + " milliseconds)";
}
Start by initializing our options with a 
timeout of 100, and a maximumAge of 0.
Do the usual here, with displayLocation 
and displayError as our success and 
error handlers, and passing in options as 
the third paramter.
This code here is the same...
We\u2019ll do the error handler first.
But in the case of a failure, 
we\u2019re going to increase the 
timeout option by 100ms and 
try again. We\u2019ll let the user know 
we\u2019re re-trying as well.
When the browser successfully gets your position, we\u2019ll let the user know how long it took.
www.it-ebooks.info
204 Chapter 5
adding a path to the map
Let\u2019s finish this app!
When you sit back and think about it, with just a little 
HTML and JavaScript you\u2019ve created a web app that not 
only can determine your location, but it can also track 
and display it in near real time. Wow, HTML sure has 
grown up (and so have your skills!).
But, speaking of this app, don\u2019t you think it needs just a 
little bit of polish to finish it off ? For instance, we could 
show your position on the map as you move around, and 
we could even go further and show where you\u2019ve been 
too, to create a path through the map.
Let\u2019s write a function to keep the map centered on your 
location as you move around, and drop a new marker 
each time we get a new position:
Okay, we\u2019re going to call this 
function scrollMapToPosition 
and we\u2019re going to pass it a 
position\u2019s coordinates.
First let\u2019s grab the new lat and 
long, and create a google.maps.
LatLng object for them.
The panTo method of the map takes the LatLng object and scrolls 
the map so your new location is at the center of the map.
Finally, we\u2019ll add a marker for your new location using the addMarker function we wrote earlier, passing in the map, the LatLng object, a title and some content for the new marker.
function scrollMapToPosition(coords) {
 var latitude = coords.latitude;
 var longitude = coords.longitude;
 var latlong = new google.maps.LatLng(latitude, longitude);
 map.panTo(latlong);
 addMarker(map, latlong, "Your new location", "You moved to: " +
 latitude + ", " + longitude);
}
What we\u2019re going to do 
to finish this app!
The coordinates are going to be your latest new 
position, so we\u2019re going to center the map on that 
location, and drop a marker there too.
www.it-ebooks.info
you are here 4 205
making your html location aware
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)";