3

Estoy tratando de hacer una página donde pueda mostrar restaurantes cercanos a la ubicación del dispositivo que se conecta a la página.

He conseguido sacar los parámetros con javascript:

navigator.geolocation.getCurrentPosition(function(position){
        let lat = position.coords.latitude;
        let long = position.coords.longitude;
    });

En mi base de datos, cada restaurante tiene su latitud y su longitud, por lo tanto solo necesitaría hacer esta petición a la base de datos:

 <?php
$lat  =  x;
$lng =  x;
$distance = 1; // Sitios que se encuentren en un radio de 1KM
$box = getBoundaries($lat, $lng, $distance);
$pdo = new PDO(........)
$stmt = $pdo->query('SELECT *, (6371 * ACOS( 
                                            SIN(RADIANS(lat)) 
                                            * SIN(RADIANS(' . $lat . ')) 
                                            + COS(RADIANS(lng - ' . $lng . ')) 
                                            * COS(RADIANS(lat)) 
                                            * COS(RADIANS(' . $lat . '))
                                            )
                               ) AS distance
                     FROM direcciones
                     WHERE (lat BETWEEN ' . $box['min_lat']. ' AND ' . $box['max_lat'] . ')
                     AND (lng BETWEEN ' . $box['min_lng']. ' AND ' . $box['max_lng']. ')
                     HAVING distance  < ' . $distance . '                                       
                     ORDER BY distance ASC ');
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
print_r($rows);
?>

La verdad es que me gustaría pasar de javascript a PHP los datos, pero no sé si me serviría para hacer una consulta en tiempo real, tendría que recargar la página. Entonces yo creo que ha de haber alguna manera con AJAX.

3
  • hola Sara, si quieres usar ajax con JS te recomiendo consultar axios o fetch. Con esas librerias puedes usar promises o async/await para hacer llamados a tu backend. Commented el 10 sept. 2019 a las 12:06
  • ¿Deseas usar jQuery para maximizar la compatibilidad, fetch que es compatible solo con las versiones modernas de Firefox, Edge (no lo es con Internet Explorer), Chrome, Opera, Safari, etc o XMLHttpRequest para maximizar compatibilidad sin hacer uso de librerías de funciones de terceros? Commented el 10 sept. 2019 a las 12:11
  • ¿Pudiste probar esto? Commented el 12 sept. 2019 a las 12:04

1 respuesta 1

3

Ya que hacer uso del API Geolocation requiere usar navegadores modernos, puedes llevar a cabo el trabajo haciendo uso del API Fetch:

let recibirDatos = posicion => {        
    var peticion = new Request('gps.php', {
        method: 'POST',
        body: JSON.stringify({
            altitude: posicion.coords.altitude,
            altitudeAccuracy: posicion.coords.altitudeAccuracy,
            latitude: posicion.coords.latitude,
            longitude: posicion.coords.longitude,
            speed: posicion.coords.speed,
        }),
        headers: new Headers({ 'Content-Type': 'application/json' }),
    });
    /* Realizamos la conexión y mostramos por consola la respuesta del PHP */
    fetch(peticion).then(
        datos => datos.text().then(console.log)
    ).catch(console.log);
});
/* Solicitamos una primera actualización inmediata */
navigator.geolocation.getCurrentPosition(recibirDatos);
/* Nos suscribimos a actualizaciones periódicas de la posición */
navigator.geolocation.watchPosition(recibirDatos);

Para leer la información enviada por javascript necesitamos, por ejemplo, este código PHP en el archivo gps.php:

<?php
header('Content-type: application/json;charset=utf-8');
$datos = file_get_contents('php://input');
/* Convertimos los datos para ser usados por PHP */
$coordenadas = json_decode($datos);
/* Obtenemos los datos para tu código */
$lat = $coordenadas->latitude;
$lng = $coordenadas->longitude;
$distance = 1; // Sitios que se encuentren en un radio de 1KM
/* Código de https://gist.github.com/mpratt/3177700#file-getboundaries-php */
require_once 'getBoundaries.php';
$box = getBoundaries($lat, $lng, $distance);
$pdo = new PDO(
    'mysql:host=localhost;dbname=test;charset=utf8',
    'test',
    'test'
);
$stmt = $pdo->prepare('
    SELECT
        *
    FROM direcciones
    WHERE
        (lat BETWEEN :min_lat AND :max_lat)
        OR (lng BETWEEN :min_lng AND :max_lng)
');
$stmt->bindValue(':min_lat', $box['min_lat']);
$stmt->bindValue(':max_lat', $box['max_lat']);
$stmt->bindValue(':min_lng', $box['min_lng']);
$stmt->bindValue(':max_lng', $box['max_lng']);
if ($stmt->execute() === false) {
    die(json_encode(['error' => true, 'info' => $stmt->errorInfo()]));
};
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
/* Entregamos los restaurantes encontrados */
echo json_encode(['error' => false, 'info' => $rows]);

PD: He corregido las malas prácticas que haces en tu código PHP. No se debe concatenar el contenido de la consulta SQL sin sanear o escapar correctamente las variables involucradas, o bien usar consultas preparadas, para evitar las peligrosas repercusiones de la inyección SQL.

El código que he usado para reproducir tu problema (e incluso el esquema de la base de datos) está disponible en el siguiente gist: https://gist.github.com/ojgarciab/6ac57efd6ceeeb368f16cdb5b27d4daa

7
  • La verdad es que no me ha funcionado, es como que no me coge la ubicación este código. Commented el 10 sept. 2019 a las 14:16
  • El código PHP o el código javascript? Commented el 10 sept. 2019 a las 14:24
  • Supongo que es el javascript, porque con el que yo he puesto de ejemplo si me dice el navegador que la página usa mi ubicación, con el que me has puesto tú no.. Commented el 10 sept. 2019 a las 14:27
  • ¿Qué navegador has usado? Yo Chrome para PC y en el móvil. Mi código es muy escueto. Es el mínimo necesario, que yo sepa, y si no funciona podrían ser otros motivos. ¿Qué te aparece en la consola de depuración de javascript? Commented el 10 sept. 2019 a las 15:17
  • Ya estoy por aquí de nuevo. Si tienes tiempo podemos echar un vistazo al problema en el chat de stackoverflow. Commented el 11 sept. 2019 a las 6:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.