php

Obtener ubicación con JavaScript y enviarla a PHP

Resumen: en este post te mostraré a obtener la ubicación de un usuario para enviarla a un servidor con PHP, usando JavaScript y PHP.

Vamos a usar JavaScript para acceder a las coordenadas GPS del dispositivo, y después vamos a usar fetch para enviar los datos a un servidor con PHP usando JSON.

Obtener coordenadas GPS con PHP y JavaScript

Nota: vamos a suscribirnos a las actualizaciones de ubicación como en otro post que vimos anteriormente.

Demostración y código fuente

En el post voy a explicar el código, pero puedes ver el repositorio completo en GitHub.

Lecturas recomendadas

Recomiendo leer:

Acceder a la ubicación con JavaScript

Recibir actualizaciones de ubicación conforme el usuario se mueve

Ya que este post solo se enfocará mayormente en la comunicación con el servidor.

Enviar coordenadas GPS a servidor con PHP

Vamos a escuchar cuando la ubicación del usuario cambie y vamos a enviar las coordenadas con el timestamp a nuestro servidor.

Lado del cliente

Comenzamos definiendo nuestro layout. En este caso pondré dos botones, uno para comenzar a loguear la ubicación y otro para detenerlo.

Esto de los botones es opcional, puedes comenzar a obtener actualizaciones de la ubicación sin la interacción del usuario, aunque obviamente necesitas permiso.

<!doctype html>
<html lang="es">
<!--
  Plantilla inicial de Bootstrap 4
  @author parzibyte
  Visita: parzibyte.me/blog
-->

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="Enviar ubicación del dispositivo a PHP">
 <meta name="author" content="Parzibyte">
 <title>Enviar ubicación del dispositivo a PHP</title>
 <!-- Cargar el CSS de Boostrap-->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous">
 <!-- Cargar estilos propios -->
 <link href="style.css" rel="stylesheet">
</head>

<body>
 <!-- Termina la definición del menú -->
 <main role="main" class="container">
  <div class="row">
   <!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
   <div class="col-12">
    <h1>Enviar ubicación del dispositivo a PHP</h1>
    <a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
    <br>
    <button id="btnIniciar" class="btn btn-info">Iniciar</button>
    <button id="btnDetener" class="btn btn-danger">Detener</button>
    <br>
    <strong>Latitud: </strong> <span id="latitud"></span>
    <strong>Longitud: </strong> <span id="longitud"></span>
    <br>
    <pre id="log"></pre>
   </div>
  </div>
 </main>
 <script src="script.js">
 </script>
</body>

</html>

Ahora definimos el script. Nos suscribimos a las actualizaciones pero cada que obtenemos una nueva ubicación, la enviamos a nuestro servidor usando fetch.

Como ves, estoy creando un nuevo objeto, ya que el que se obtiene no se puede codificar (supongo que no es serializable por lo mismo de la seguridad)

Fíjate que lo estoy codificando con JSON.

/**
    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/const funcionInit = () => {
 if (!"geolocation" in navigator) {
  return alert("Tu navegador no soporta el acceso a la ubicación. Intenta con otro");
 }

 const RUTA_API = "./loguear.php";

 let idWatcher = null;

 const $latitud = document.querySelector("#latitud"),
  $longitud = document.querySelector("#longitud"),
  $btnIniciar = document.querySelector("#btnIniciar"),
  $btnDetener = document.querySelector("#btnDetener"),
  $log = document.querySelector("#log");


 const onUbicacionConcedida = ubicacion => {
  const coordenadas = ubicacion.coords;
  $latitud.innerText = coordenadas.latitude;
  $longitud.innerText = coordenadas.longitude;
  loguear(`${ubicacion.timestamp}: ${coordenadas.latitude},${coordenadas.longitude}`);
  enviarAServidor(ubicacion);
 }

 const enviarAServidor = ubicacion => {
  // Debemos crear otro objeto porque el que nos mandan no se puede codificar
  const otraUbicacion = {
   coordenadas: {
    latitud: ubicacion.coords.latitude,
    longitud: ubicacion.coords.longitude,
   },
   timestamp: ubicacion.timestamp,
  };
  console.log("Enviando: ", otraUbicacion);
  fetch(RUTA_API, {
   method: "POST",
   body: JSON.stringify(otraUbicacion),
  }); // No esperamos el then porque no hacemos nada cuando se termine
 };

 const loguear = texto => {
  $log.innerText += "\n" + texto;
 };

 const onErrorDeUbicacion = err => {

  $latitud.innerText = "Error obteniendo ubicación: " + err.message;
  $longitud.innerText = "Error obteniendo ubicación: " + err.message;
  console.log("Error obteniendo ubicación: ", err);
 }

 const detenerWatcher = () => {
  if (idWatcher) {
   navigator.geolocation.clearWatch(idWatcher);
  }
 }

 const opcionesDeSolicitud = {
  enableHighAccuracy: true, // Alta precisión
  maximumAge: 0, // No queremos caché
  timeout: 5000 // Esperar solo 5 segundos
 };


 $btnIniciar.addEventListener("click", () => {
  detenerWatcher();
  idWatcher = navigator.geolocation.watchPosition(onUbicacionConcedida, onErrorDeUbicacion, opcionesDeSolicitud);
 });

 $btnDetener.addEventListener("click", detenerWatcher);

 $latitud.innerText = "Cargando...";
 $longitud.innerText = "Cargando...";


};
document.addEventListener("DOMContentLoaded", funcionInit);

También observa la constante RUTA_API, pues en esa ubicación es en donde se va a enviar la ubicación del usuario.

Lado del servidor

En el lado del servidor recibimos la información y decodificamos el JSON.

Para guardar las coordenadas podríamos usar un método más robusto como una base de datos, pero en este caso estoy usando un simple archivo de texto usando la función file_put_contents y la constante FILE_APPEND para agregar contenido en lugar de remplazarlo.

<?php
/*
    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/$ubicacion = json_decode(file_get_contents("php://input"));
$mensaje = "Timestamp: " . $ubicacion->timestamp . PHP_EOL;
$mensaje .= "Latitud: " . $ubicacion->coordenadas->latitud . PHP_EOL;
$mensaje .= "Longitud: " . $ubicacion->coordenadas->longitud . PHP_EOL . PHP_EOL;
file_put_contents("ubicaciones.txt", $mensaje, FILE_APPEND);

El objeto tiene la propiead timestamp. También tiene la propiedad coordenadas que a su vez tienen latitud y longitud.

Si ahora abrimos el archivo ubicaciones.txt veremos que las coordenadas han sido logueadas.

Este método es obviamente más fiable que el de la IP para obtener la ubicación de un dispositivo con PHP.

Como siempre lo digo, puedes mirar el código en GitHub.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • una pregunta , bueno ya descargue los scripts y ya los corri y todo ok, pero si quiero ponerlo en un pop up o ventana emergente como lo haria, y otra duda como hacer para que el usuario no tenga que dar clic el usuario a iniciar , si no que inicie en automatico al permitir o dar el permiso del navegador y en automatico inicie el registro de la ubicacion o las ubicaciones son mis dudas

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

3 días hace

Esta web usa cookies.