{"id":8899,"date":"2016-05-13T00:05:46","date_gmt":"2016-05-12T22:05:46","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=8899"},"modified":"2016-05-13T00:09:55","modified_gmt":"2016-05-12T22:09:55","slug":"geolocalizacion-usando-html5-al-detalle","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/geolocalizacion-usando-html5-al-detalle\/","title":{"rendered":"Geolocalizaci\u00f3n usando HTML5 al detalle."},"content":{"rendered":"

HTML5 ofrece una API muy potente de geolocalizaci\u00f3n. Esta API permite a los desarrolladores determinar la posici\u00f3n f\u00edsica del usuario que se encuentra navegando. Anteriormente se realizaba capturando la IP y almacenando los datos en una base de datos, para posteriormente realizar una consulta. Esto se realizaba generalmente mediante programaci\u00f3n con alg\u00fan lenguaje del lado servidor como pueden ser PHP, JSP, ASP.<\/p>\n

Con la anterior t\u00e9cnica se puede obtener la direcci\u00f3n\u00a0 IP del usuario gracias a que las direcciones IP est\u00e1n agrupadas de modo que se sabe que cada IP pertenece a un determinado lugar del planeta. De esta forma podr\u00edamos de obtener del usuario el pa\u00eds, estado, cuidad, etc\u2026) mediante un web service o una base de datos de IPs .<\/p>\n

HTML5 y su API aprovecha datos de la posici\u00f3n GPS de un dispositivo o mediante la triangulaci\u00f3n de se\u00f1ales WIFI de los routers. De esta forma, con la informaci\u00f3n que nos proporciona la API podemos adaptar nuestras aplicaciones en funci\u00f3n de la ubicaci\u00f3n del internauta.<\/p>\n

HTML5 se apoya en javascript para poder programar estas acciones.<\/p>\n

Existen 3 m\u00e9todos para trabajar con la geolocalizaci\u00f3n<\/p>\n

<\/p>\n

<script type=\u201dtext\/javascript\u201d>\r\n\r\n\/\/ Primer m\u00e9todo\r\n\r\ngetCurrentPosition (*ubicaci\u00f3n, error, configuraci\u00f3n)\r\n\r\n\/\/ Segundo m\u00e9todo, parecido al anterior, con vigilancia constante.\r\n\r\nwatchPosition (*ubicaci\u00f3n, error, configuraci\u00f3n)\r\n\r\n\/\/ Tercer m\u00e9todo\r\n\r\nclearWatch(id);\r\n\r\n<\/script><\/pre>\n
 <\/p>\n
Los sistemas de ubicaci\u00f3n emplean latitudes y longitudes, son 2 coordenadas que nos permiten buscar una ubicaci\u00f3n en la tierra.<\/p>\n
Atributos como la latitud, longitud, altitud, accuracy (exactitud), altitude accuracy (exactitud de la altura), heading (direcci\u00f3n en grados), speed (en metros\/s)<\/p>\n
Veamos un sencillo ejemplo usando getCurrentPosition, el resultado mostrar\u00e1 en pantalla la latitud, longitud y la precisi\u00f3n.<\/p>\n
<!DOCTYPE HTML>\r\n<html lang=\"es\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\u201dtext\/html; charset=\"utf-8\">\r\n<title>Usando la geolocalizaci\u00f3n con HTML5<\/title>\r\n<script type=\"text\/javascript\">\r\n\r\n\r\nfunction iniciar()\r\n{\r\n\tvar boton=document.getElementById('obtener');\t\r\n\tboton.addEventListener('click', obtener, false);\r\n}\r\n\r\nfunction obtener(){\r\n\tnavigator.geolocation.getCurrentPosition(mostrar);\r\n}\r\n\r\nfunction mostrar(posicion)\r\n{\r\n\tvar ubicacion = document.getElementById('ubicacion');\r\n\tvar datos=\"\";\r\n\t\tdatos+='Latitud: '  + posicion.coords.latitude + '<br\/>';\r\n\t\tdatos+='Longitud: ' + posicion.coords.longitude + '<br\/>';\r\n\t\tdatos+='Exactitud: ' + posicion.coords.accuracy + '<br\/>';\r\n\t\tubicacion.innerHTML=datos;\r\n}\r\nwindow.addEventListener('load', iniciar, false);\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div id=\"ubicacion\">\r\n<button id=\"obtener\">Obtener mi ubicaci\u00f3n <\/button>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
La demo:<\/strong><\/p>\n
http:\/\/www.palentino.es\/ubicacion\/mi-direccion.htm<\/a><\/p>\n
 <\/p>\n
Cuando se ejecuta el c\u00f3digo pedir\u00e1 una autorizaci\u00f3n para usar nuestra ubicaci\u00f3n. Si estamos en Windows 10, aparecer\u00e1 un icono en la barra de tareas. Los ajustes los podemos establecer pulsando el icono, o en el panel de control.<\/p>\n
 <\/p>\n
En Chrome<\/p>\n
\"Chrome-permitir\"<\/a><\/p>\n
 <\/p>\n
\"en-chrome\"<\/a><\/p>\n
 <\/p>\n
\"Mensaje-chrome\"<\/a><\/p>\n
 <\/p>\n
En Edge sobre windows 10.<\/p>\n
\"permiso\"<\/a><\/p>\n
 <\/p>\n
\"ubicacion\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
Por otro lado, como he mencionado anteriormente, si navegamos desde un equipo de escritorio sin GPS, la localizaci\u00f3n se obtiene triangulando la se\u00f1al WIFI del router. No es tan precisa como un GPS.<\/p>\n
Mediante la API de google maps, podemos combinar estos datos para obtener la posici\u00f3n en el mapa. Esta API emplea el objeto canvas de HTML5.<\/p>\n
Podremos obtener en el mapa google maps, la posici\u00f3n del usuario, con marcador.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\r\n    <meta charset=\"utf-8\">\r\n    <title>Google Maps<\/title>\r\n    <link href=\"default.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false\"><\/script>\r\n    <script type=\"application\/javascript\">    \r\n \r\n      function initialize() {\r\n\t\t\tvar latlng = new google.maps.LatLng(-42.0005, -5.5111);\r\n\t\t\tvar mapOptions = {\r\n\t\t\t  zoom: 12,\r\n\t\t\t  center: latlng,\r\n\t\t\t  mapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t\t\t}\r\n\t\t\tmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);\r\n\t\t\t\t\r\n\t\t\/\/ inserta marcador\t\r\n\t\tvar imagen=\"mi-icono.png\"\r\n    var marker = new google.maps.Marker({\r\n\t\t  position: latlng,\r\n\t\t  map: map,\r\n      animation: google.maps.Animation. DROP,  \/\/ otras opciones BOUNCE\r\n      icon: imagen,  \/\/ nombre de la imagen\r\n      title: \"Esto es el t\u00edtulo del marcador\"\r\n\r\n \r\n \t\t});\r\n      }\t\t\r\n\r\n    <\/script>\r\n  <\/head>\r\n  <body onload=\"initialize()\"> \r\n    <div id=\"map_canvas\" style=\"height:90%;\">\r\n  <\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5 ofrece una API muy potente de geolocalizaci\u00f3n. Esta API permite a los desarrolladores determinar la posici\u00f3n f\u00edsica del usuario que se encuentra navegando. Anteriormente se realizaba capturando la IP y almacenando los datos en una base de datos, para posteriormente realizar una consulta. Esto se realizaba generalmente mediante programaci\u00f3n con alg\u00fan lenguaje del lado servidor como pueden ser PHP, JSP, ASP. Con la anterior t\u00e9cnica se puede obtener la direcci\u00f3n\u00a0 IP del usuario gracias a que las direcciones IP est\u00e1n agrupadas de modo que se sabe que cada IP pertenece a un determinado lugar del planeta. De esta forma podr\u00edamos de obtener del usuario el pa\u00eds, estado, cuidad, etc\u2026) mediante un web service o una base de datos de IPs . HTML5 y su API aprovecha datos de la posici\u00f3n GPS de un dispositivo o mediante la triangulaci\u00f3n de se\u00f1ales WIFI de los routers. De esta forma, con la informaci\u00f3n que nos proporciona la API podemos adaptar nuestras aplicaciones en funci\u00f3n de la ubicaci\u00f3n del internauta. HTML5 se apoya en javascript para poder programar estas acciones. Existen 3 m\u00e9todos para trabajar con la geolocalizaci\u00f3n<\/p>\n","protected":false},"author":1,"featured_media":6903,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[446,1415],"tags":[],"class_list":["post-8899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-sin-categoria-es"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=8899"}],"version-history":[{"count":7,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8899\/revisions"}],"predecessor-version":[{"id":8911,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8899\/revisions\/8911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/6903"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=8899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=8899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=8899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}