{"id":282,"date":"2024-05-21T10:21:05","date_gmt":"2024-05-21T08:21:05","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=282"},"modified":"2024-05-21T10:21:05","modified_gmt":"2024-05-21T08:21:05","slug":"65-api-html-geolocation","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/65-api-html-geolocation\/","title":{"rendered":"65. API HTML Geolocation"},"content":{"rendered":"\n

La API HTML Geolocation<\/strong> es utilizada para localizar las posiciones de los usuarios.<\/p>\n\n\n\n

Localizar la posici\u00f3n del usuario<\/h2>\n\n\n\n

La API Geolocation<\/strong> HTML se utiliza para obtener la posici\u00f3n geogr\u00e1fica de un usuario. Dado que esto puede comprometer la privacidad, el puesto no est\u00e1 disponible a menos que el usuario lo apruebe.<\/p>\n\n\n\n

\n

Nota<\/strong>: Geolocation<\/strong> es m\u00e1s precisa para dispositivos con GPS, como los tel\u00e9fonos inteligentes.<\/p>\n<\/blockquote>\n\n\n\n

Usando Geolocation<\/h2>\n\n\n\n

El m\u00e9todo getCurrentPosition();<\/em><\/strong> se utiliza para devolver la posici\u00f3n del usuario. El siguiente ejemplo devuelve la latitud y la longitud de la posici\u00f3n del usuario.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<body>\n\n<p>Click the button to get your coordinates.<\/p>\n\n<button onclick=\"getLocation()\">Try It<\/button>\n\n<p id=\"demo\"><\/p>\n\n<script>\nlet x = document.getElementById(\"demo\");\n\nfunction getLocation() {\nif (navigator.geolocation) {\nnavigator.geolocation.getCurrentPosition(showPosition);\n} else { \nx.innerHTML = \"Geolocation no es soportada en este navegador.\";\n}\n}\n\nfunction showPosition(position) {\nx.innerHTML = \"Latitude: \" + position.coords.latitude + \n\"<br>Longitude: \" + position.coords.longitude;\n}\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Ejemplo explicado<\/strong><\/p>\n\n\n\n
    \n
  • Comprueba si la geolocalizaci\u00f3n es compatible<\/li>\n\n\n\n
  • Si es compatible, ejecuta el m\u00e9todo getCurrentPosition()<\/em><\/strong>. Si no, muestra un mensaje al usuario.<\/li>\n\n\n\n
  • Si el m\u00e9todo getCurrentPosition()<\/em><\/strong> tiene \u00e9xito, devuelve un objeto de coordenadas a la funci\u00f3n especificada en el par\u00e1metro (showPosition<\/em><\/strong>)<\/li>\n\n\n\n
  • La funci\u00f3n showPosition()<\/em><\/strong> genera la latitud y la longitud<\/li>\n<\/ul>\n\n\n\n
    Manejo de errores y rechazos<\/h2>\n\n\n\n
    El segundo par\u00e1metro del m\u00e9todo getCurrentPosition()<\/em><\/strong> se usa para manejar errores. Especifica una funci\u00f3n para ejecutar si no puede obtener la ubicaci\u00f3n del usuario.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<body>\n\n<p>Click the button to get your coordinates.<\/p>\n\n<button onclick=\"getLocation()\">Try It<\/button>\n\n<p id=\"demo\"><\/p>\n\n<script>\nvar x = document.getElementById(\"demo\");\n\nfunction getLocation() {\nif (navigator.geolocation) {\nnavigator.geolocation.getCurrentPosition(showPosition, showError);\n} else {\nx.innerHTML = \"Geolocation is not supported by this browser.\";\n}\n}\n\nfunction showPosition(position) {\nx.innerHTML = \"Latitude: \" + position.coords.latitude +\n\"<br>Longitude: \" + position.coords.longitude;\n}\n\nfunction showError(error) {\nswitch(error.code) {\ncase error.PERMISSION_DENIED:\nx.innerHTML = \"User denied the request for Geolocation.\"\nbreak;\ncase error.POSITION_UNAVAILABLE:\nx.innerHTML = \"Location information is unavailable.\"\nbreak;\ncase error.TIMEOUT:\nx.innerHTML = \"The request to get user location timed out.\"\nbreak;\ncase error.UNKNOWN_ERROR:\nx.innerHTML = \"An unknown error occurred.\"\nbreak;\n}\n}\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    Informaci\u00f3n espec\u00edfica de la ubicaci\u00f3n<\/h2>\n\n\n\n
    Esta p\u00e1gina ha demostrado c\u00f3mo mostrar la posici\u00f3n de un usuario en un mapa. Geolocation<\/strong> tambi\u00e9n es muy \u00fatil para obtener informaci\u00f3n espec\u00edfica de la ubicaci\u00f3n, como:<\/p>\n\n\n\n
      \n
    • Informaci\u00f3n local actualizada<\/li>\n\n\n\n
    • Mostrando puntos de inter\u00e9s cerca del usuario<\/li>\n\n\n\n
    • Navegaci\u00f3n paso a paso (GPS)<\/li>\n<\/ul>\n\n\n\n
      El m\u00e9todo getCurrentPosition() – Devolver datos<\/h2>\n\n\n\n
      El m\u00e9todo getCurrentPosition()<\/em><\/strong> devuelve un objeto en caso de \u00e9xito. Las propiedades latitude<\/em><\/strong>, longitude<\/em> <\/strong>y accuracy<\/em> <\/strong>siempre se devuelven. Las otras propiedades se devuelven si est\u00e1n disponibles:<\/p>\n\n\n\n
      Propiedad<\/th>Devuelve<\/th><\/tr>
      coords.latitude<\/em><\/strong><\/td>La latitud como n\u00famero decimal (siempre devuelto)<\/td><\/tr>
      coords.longitude<\/strong><\/em><\/td>La longitud como un n\u00famero decimal (siempre devuelto)<\/td><\/tr>
      coords.accuracy<\/em><\/strong><\/td>La precisi\u00f3n de la posici\u00f3n (siempre devuelta)<\/td><\/tr>
      coords.altitude<\/em><\/strong><\/td>La altitud en metros sobre el nivel medio del mar (devuelto si est\u00e1 disponible)<\/td><\/tr>
      coords.altitudeAccuracy<\/em><\/strong><\/td>La precisi\u00f3n de altitud de la posici\u00f3n (devuelta si est\u00e1 disponible)<\/td><\/tr>
      coords.heading<\/em><\/strong><\/td>El rumbo como grados en el sentido de las agujas del reloj desde el norte (devuelto si est\u00e1 disponible)<\/td><\/tr>
      coords.speed<\/em><\/strong><\/td>La velocidad en metros por segundo (devuelta si est\u00e1 disponible)<\/td><\/tr>
      timestamp<\/em><\/strong><\/td>La fecha\/hora de la respuesta (devuelta si est\u00e1 disponible)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Objeto Geolocation – Otros m\u00e9todos interesantes<\/h2>\n\n\n\n
      El objeto Geolocation<\/strong> tambi\u00e9n tiene otros m\u00e9todos interesantes:<\/p>\n\n\n\n
        \n
      • watchPosition()<\/em><\/strong>: devuelve la posici\u00f3n actual del usuario y contin\u00faa devolviendo la posici\u00f3n actualizada a medida que el usuario se mueve (como el GPS en un autom\u00f3vil).<\/li>\n\n\n\n
      • clearWatch()<\/em><\/strong>: Detiene el m\u00e9todo watchPosition()<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
        El siguiente ejemplo muestra el m\u00e9todo watchPosition()<\/em><\/strong>. Necesita un dispositivo GPS preciso para probar esto (como un tel\u00e9fono inteligente).<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <!DOCTYPE html>\n<html>\n<body>\n\n<p>Click the button to get your coordinates.<\/p>\n\n<button onclick=\"getLocation()\">Try It<\/button>\n\n<p id=\"demo\"><\/p>\n\n<script>\nvar x = document.getElementById(\"demo\");\n\nfunction getLocation() {\nif (navigator.geolocation) {\nnavigator.geolocation.watchPosition(showPosition);\n} else { \nx.innerHTML = \"Geolocation is not supported by this browser.\";\n}\n}\n\nfunction showPosition(position) {\nx.innerHTML=\"Latitude: \" + position.coords.latitude + \n\"<br>Longitude: \" + position.coords.longitude;\n}\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
        La API HTML Geolocation es utilizada para localizar las posiciones de los usuarios. Localizar la posici\u00f3n del usuario La API Geolocation HTML…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":64,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-282","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"La API HTML Geolocation es utilizada para localizar las posiciones de los usuarios. Localizar la posici\u00f3n del usuario La API Geolocation HTML...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/282\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/282\/revisions\/284"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}