Nesta semana iremos abordar um tema um tanto curioso e novo para alguns, a API de GeoLocation do novo HTML. Mas você sabe exatamente o que significa GeoLocalização? Geolocalização é a identificação da localização geográfica do mundo real de um objeto, ou seja, podemos nos referir à prática de avaliar a localização.
Na grande maioria das aplicações, três formatos de localização são citados para que possamos descobrir a posição de um objeto, elas são: Triangulação GPRS, GeoLocalização por IP e o GPS. Entretanto, estas não são as únicas tecnologias que podem realizar esta atividade, existe outro agente que utiliza algumas destas combinações de métodos para retornar a localização.
Mas o que a API nos retorna? Ela basicamente nos retorna os valores de latitude, o qual é o ponto norte/sul e a longitude o ponto leste/oeste.
Quais são os browsers e sistemas móveis que suportam esta API?
- Android 2.0+
- iPhone 3.0+
- Blackberry 5.0+
- Palm WebOS 2.0+
- Firefox 3.5+
- Chrome 5+
Bom, chega de conceitos e vamos ao que interessa. Para que você possa trabalhar com a API é simples, você deve apenas inserir a linha de código abaixo para que seja possível obter a posição do objeto.
navigator.geolocation.getCurrentPosition(showpos)
Note que a função showpos é um callback, ela irá receber um objeto de posição:
function showpos(position){
lat=position.coords.latitude
lon=position.coords.longitude
alert('Your position: '+lat+','+lon)
}
Como você pode notar este é apenas um simples exemplo de código que pode ser realizado, claro que você pode e deve inserir outras funcionalidades como, por exemplo: um mapa ou utilizar chamadas em Ajax e entre outras possibilidades para o seu sistema.
Mas para que você possa visualizar um exemplo completo, estamos disponibilizando um código abaixo com um exemplo completo e com mapa, para que assim você possa estuda-lo. Mas a nossa passagem pela tecnologia HTML5 não termina por aqui, no próximo post iremos falar sobre a Storage API e suas três formas de persistência de dados.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Mobiltec: GeoLocation</title>
</head>
<body>
<section id="wrapper">
<header>
<h1>Mobiltec Html5 GeoLocation</h1>
</header>
<meta name="viewport" content="width=620" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<article>
<p>Localizando a sua posição: <span id="status">buscando...</span></p>
</article>
<script>
function success(position) {
var s = document.querySelector('#status');
if (s.className == 'success') {
return;
}
s.innerHTML = "Você foi Localizado!!!";
s.className = 'success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
document.querySelector('article').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
});
}
function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "Erro ao localizar";
s.className = 'fail';
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
</script>
</section>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Escrito por Marcel Guinther
HTML5 é a mais recente versão do HTML, que está sendo desenvolvida pela W3C e outros parceiros. Esta linguagem de marcação tem como um dos seus principais objetivos facilitar a manipulação de elementos, possibilitando que o desenvolvedor seja capaz de modificar características de objetos de uma forma não intrusiva e transparente ao usuário final.
