Aunque se asocia el lanzamiento de las funciones de geolocalización al HTML 5, lo cierto es que la Geolocation API son unas funciones en JavaScript independientes de esta forma de mostrar las páginas web.
Básicamente el navegador, dependiendo de la conexión a Internet, será capaz de saber qué latitud, longitud y otros datos tienes en ese momento. Os dejo con un par de ejemplos de código que, dependiendo del navegador, deberían funcionar.
El código más sencillo tiene una pinta tal que esta:
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} else {
alert('Tu navegador no soporta la geolocalizacion.');
}
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Tu localizacion es -- latitud : '+lat+' longitud : '+long);
}
function errorFunction(position) {
alert('No se ha podido recuperar la geolocalizacion.');
}
</script>
Si queréis un ejemplo completo os paso el código HTML5 de una página que te localiza y te lo posiciona en el Mapa
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="language" content="es">
<title>Prueba de Geolocalización</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
#map_canvas {
height: 85%;
width: 100%;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="locationinfo"></div>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
alert('Tu navegador no soporta la geolocalizacon de HTML 5.');
}
function displayPosition(pos) {
var mylat = pos.coords.latitude;
var mylong = pos.coords.longitude;
var thediv = document.getElementById('locationinfo');
thediv.innerHTML = '<p>Tu localizacion es -- latitud : ' + mylong + ' longitud : ' + mylat + '</p>';
var latlng = new google.maps.LatLng(mylat, mylong);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Aqui estas"
});
}
function errorFunction(pos) {
alert('o se ha podido recuperar la localizacion');
}
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario