geolocalización con html 5 y bing
TRANSCRIPT
Geolocalización con HTML 5 y BingEl soporte para la geolocalización mediante HTML 5 depende del explorador de
Internet y sólo de él -de que proporcione herramientas software para uso de
funciones específicas para tal fin-. Del método usado posteriormente nos
referiremos brevemente y será empleado, en todo caso, el mejor de los
disponibles, de forma transparente para el usuario.
La geolocalización se lleva a cabo mediante tres métodos:
Vía IP: En un ordenador de sobremesa estándar, que está conectado a la red a través de un
cable físico, todo el tráfico que fluye se orienta conforme a su dirección IP (Internet Protocol)
que actúa, de forma muy simplificada, como un código postal. Evidentemente, esa no es la
mejor manera de localización, pero sí nos da una idea somera de dónde se encuentra.
Redes Wi-Fi: En cualquier tipo de ordenador que utilice una conexión inalámbrica -
típicamente una red Wi-Fi-, se basa en la triangulación de puntos de acceso hasta nuestro
receptor. Es un método sensiblemente más preciso que mediante el IP, pero mucho menos
que mediante GPS.
GPS: Global Positioning System, Sistema de Posicionamiento Global, SPG. Debe estar
activado, como es lógico -sólo lo recordamos, dado que es habitual desactivarlo y activarlo
según las circunstancias-.
La tabla que sigue, nos informa del estado de soporte por parte de casi todos los
exploradores de importancia del mercado:
El API de geolocalización de HTML 5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<title>Geolocalización 0</title>
</head>
<body>
<h1>Geolocalización</h1>
<script>
if(navigator.geolocation) {
alert('El explorador soporta geolocalización');
} else {
alert('El explorador NO soporta geolocalización');
}
</script>
</body>
</html>
Mediante el objeto navigator.geolocation disponemos de los siguientes tres
métodos:
getCurrentPosition(): se encargará de localizar la posición actual del usuario de una manera
asíncrona.
watchPosition(): comienza a monitorizar la localización de un usuario durante un intervalo.
clearWatch(): finaliza la monitorización de la localización del usuario.
Así pues, todo comienza realmente con una llamada a
getCurrentPosition(function(){}, function(){}). Observe que toma como parámetros
dos funciones optativas, puede haber una definida, las dos, o ninguna -caso de
mera comprobación, dado que nada obtendremos de la llamada-. Se nos pedirá
permiso como usuarios para acceder a nuestra posición. En caso de que el
usuario dé su permiso, se llamará a la primera función pasada; en el caso
contrario, o si ocurriera un error de acceso, sería llamada la segunda función
pasada como argumento del método.
En el listado que sigue haremos simplemente una simulación del proceso, ya que
la llamada nos lleva a una vía muerta -faltan los contenidos funcionales de las
respuestas positivas y negativas-, a ello llegaremos seguidamente. Valga como
ejemplo.
Geolocalización en mapas Bing. El Bing Maps AJAX ControlLos sitios de Internet oficiales que sugerimos para consulta inicial son:
Bing Maps AJAX Control, Version 6.3
http://msdn.microsoft.com/en-us/library/bb429619.aspx
Bing Maps AJAX Control, Version 7.0
http://msdn.microsoft.com/en-us/library/gg427610.aspx
Getting Started with the Bing Maps AJAX Control
http://msdn.microsoft.com/en-us/library/ee692181.aspx
Loading the AJAX Map Control
http://msdn.microsoft.com/en-us/library/gg427624.aspx
Hardcoded geolocalizaciónEn este apartado nos fijaremos solamente en lo referente al modo de acotar y
representar un mapa obtenido del servidor de Bing.
En esencia, este ejemplo, basado en la documentación más elemental de Bing
Maps AJAX Control, se realizan las siguientes tareas:
En el primer <script> se carga toda la fuente del API en JavaScript del control. Nótese que
se indica la versión -6.3 o 7.0-. En nuestro caso será indiferente, pero la conveniencia es
migrar a la última versión disponible.
Esencialmente, lo que sigue es cargar las cotas fijas a las que queremos ir -longitud y
latitud-
var LA = new VELatLong(48, 8);
Finalmente, la función que nos mostrará el mapa - function GetMap()- toma el lugar del
documento HTML en donde se mostrará, y carga las cotas de la variable creada en el paso
anteriormente comentado
Se dibuja en el área HTML reservada (<div>...</div>)
El área de dibujo está determinada por una serie de estilos definidos en la etiqueta <div> de
apertura
Nótese que en la etiqueta de cuerpo del documento <body> se indica que se ejecute el
<script> de creación del mapa al cargarse el documento HTML:
<body onload="GetMap();">
Listado 2: En el listado que sigue, ilustra un mapa -fijado por geolocalización- en el
que se pasan las cotas -latitud y longitud- predeterminadas:
<!DOCTYPE html>
<html>
<head>
<title>BING Map Control 6.3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?
v=6.3">
</script>
<script>
var map = null;
var LA = new VELatLong(48, 8);
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(LA);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative;
width:800px; height:600px;
border:10px solid #eaeaea;">
</div>
</body>
</html>
Ejemplo completo de geolocalizaciónLas líneas generales son:
Detección de soporte del API de geolocalización de HTML 5
Si no se soporta, se avisa y el programa finaliza
Si se soporta, se emite un mensaje con las cotas y precisión de la detección
Se crea el mapa centrado en dichas cotas
Se dibuja en el área HTML reservada (<div>...</div>)
En el proceso, eventualmente se pedirán permisos de ejecución al usuario para detectar su
posición
Listado 3: En el listado que sigue, se ilustra un mapa -fijado por geolocalización-
en el que se pasan las cotas -latitud y longitud- detectadas mediante el API de
HTML 5:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?
v=6.3">
</script><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?
v=6.3">
</script>
<script>
var map = null;
var pinPoint = null;
var pinPixel = null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
alert("Usted ha sido localizado en ("+position.coords.latitude+","
+position.coords.longitude+")"
+" con una exactitud de "
+position.coords.accuracy
+" metros.");
var LA = new VELatLong(position.coords.latitude,
position.coords.longitude);
map = new VEMap('Contenedor');
map.LoadMap(LA, 15, VEMapStyle.Road, false,
VEMapMode.Mode2D, true, 1);
pinPoint = map.GetCenter();
pinPixel = map.LatLongToPixel(pinPoint);
map.AddPushpin(pinPoint);
});
}else {
alert("El explorador NO soporta Goelocalizaci?n.");
}
</script>
</head>
<body>
<div id="Contenedor"></div>
</body>
</html>
<script>
var map = null;
var pinPoint = null;
var pinPixel = null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
alert("Usted ha sido localizado en ("+position.coords.latitude+","
+position.coords.longitude+")"
+" con una exactitud de "
+position.coords.accuracy
+" metros.");
var LA = new VELatLong(position.coords.latitude,
position.coords.longitude);
map = new VEMap('Contenedor');
map.LoadMap(LA, 15, VEMapStyle.Road, false,
VEMapMode.Mode2D, true, 1);
pinPoint = map.GetCenter();
pinPixel = map.LatLongToPixel(pinPoint);
map.AddPushpin(pinPoint);
});
}else {
alert("El explorador NO soporta Goelocalizaci?n.");
}
</script>
</head>
<body>
<div id="Contenedor"></div>
</body>
</html>
