2

siento esta pregunta tonta pero estoy obcecado y no me sale tengo esta funcion que me devuelve las coordenadas

function coordenadas() {
    navigator.geolocation.getCurrentPosition(function(location) {
        $('#latitud').val(location.coords.latitude);
        $('#longitud').val(location.coords.longitude);
        var latitude=(location.coords.latitude);
        var longitude=(location.coords.longitude);
        var map;
        var center = {lat: location.coords.latitude, lng: location.coords.longitude};
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: center,
                zoom: 6
            });
            var marker = new google.maps.Marker({
                position: {lat: location.coords.latitude, lng: location.coords.longitude},
                map:map,
                title: 'Ubicacion'
            });
        }
        initMap();
    });
}

y luego tengo esta llamada a ajax que es para que el trabajador cuando firme que se guarde hora y fecha turno nombre, etc de cuando ficho pero ahora me piden tambien la posición en la cual ficho,

$('#finicio').on('click', function(e){ // add event submit

    coordenadas()

    var cod=$('#trabajador').val()
    var linea=$('#linea').val()
    var turno=$('#turno').val()
    var fecha=$('#fecha').val()
    $.ajax({
        url: 'ajax/firmainicio.php',
        type: 'POST',
        data: {
            cod:cod,
            linea:linea,
            turno:turno,
            fecha:fecha,
        },
        success: function (response) {
            if (response=="null"){
                $('#myModal1').modal('toggle');
            }
            else{
                $('#myModal').modal('toggle');

            }
        }
    });
});

pero no me funciona coger la posición de la función coordenadas para poder pasarlas al ajax y guardarlas en la base de datos para luego listarlas espero puedan ayudarme gracias Ejecutando $.when que no se si se usa así me sigue devolviendo la variable longitud y latitud vacia

    $('#finicio').on('click', function(e){ // add event submit
        $.when(coordenadas()).then(function () {
                var cod=$('#trabajador').val()
                var linea=$('#linea').val()
                var turno=$('#turno').val()
                var fecha=$('#fecha').val()

                var latitud=$('#latitud').val()
                var longitud=$('#longitud').val()
                console.log(latitud)
                console.log(longitud)

                $.ajax({
                    url: 'ajax/firmainicio.php',
                    type: 'POST',
                    data: {
                        cod:cod,
                        linea:linea,
                        turno:turno,
                        fecha:fecha,
                        latitud:latitud,
                        longitud:longitud
                    },
                    success: function (response) {
                        if (response=="null"){
                            $('#myModal1').modal('toggle');
                        }
                        else{
                            $('#myModal').modal('toggle');

                        }
                    }
                })
        })
    });

9
  • Cuando haces esto en la función coordenadas() $('#latitud').val(location.coords.latitude); $('#longitud').val(location.coords.longitude); ¿puedes visualizar las coordenadas?
    – ErnestoRM
    Commented el 19 jun. 2019 a las 9:39
  • Estás utilizando la api de google maps para lo cual necesitas activar el servicio en una cuenta de google y pasar al objeto tu api key
    – David
    Commented el 19 jun. 2019 a las 9:40
  • si, puedo ver las coordenadas, he probado a meter los valores en un input hidden y los mete pero despues de que se ejecute la funcion "coordenadas"
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 9:42
  • ¿ @KeTeMeTo has probado a añadir esto después de ejecutar la función coordenadas()? var latitud=$('#latitud').val() var longitud=$('#longitud').val() y luego pasarlas junto con los otros datos?
    – ErnestoRM
    Commented el 19 jun. 2019 a las 9:50
  • claro si eso es lo que he probado pero me las envia en blanco, ya que la funcion coordenadas() se llama antes pero termina de ejecutarse despues, ese es el problema que me las envia en blanco porque cuando las envia todavia no las ha rellenado, me funciona ejecutando coordenadas() en el document.ready pero claro hay solo actualiza la posicion cuando se recarga la pagina no al hacer click en firmar como yo quiero... no se si me entiendes. pd:gracias pos contestar!
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 9:57

3 respuestas 3

2

El problema es que Geolocation.getCurrentPosition es asincrónico y estás intentando acceder a sus datos de manera sincrónica, por lo cual genera un racing condition. No tener este concepto en mente, puede generar varios bugs alrededor de tu app, porque estamos dependiendo de qué tan rápido getCurrentPosition resuelve.

Para resolver este tipo de problemas, existe en javascript el concepto de Promise. En resumen, esperamos hasta que un proceso se complete para poder continuar con los siguientes procesos.

Para poder usar Promises en coordenadas, deberíamos hacer lo siguiente:


function coordenadas() {
  // iniciamos el proceso asincrónico
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(
      function(location) {
        $('#latitud').val(location.coords.latitude);
        $('#longitud').val(location.coords.longitude);
        var latitude = location.coords.latitude;
        var longitude = location.coords.longitude;
        var map;
        var center = {
          lat: location.coords.latitude,
          lng: location.coords.longitude
        };
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: center,
            zoom: 6
          });
          var marker = new google.maps.Marker({
            position: {
              lat: location.coords.latitude,
              lng: location.coords.longitude
            },
            map: map,
            title: 'Ubicacion'
          });
        }
        initMap();
        // resolvemos devolviendo location, dado por getCurrentPosition
        resolve(location);
      },
      // segundo parámetro de getCurrentPosition es un callback en caso de error
      function error(error) {
        // devolvemos el error
        reject(error);
      }
    );
  });
}

Una vez hecho esto, cuando llamamos a coordenadas, podemos esperar hasta tener nuestro resultado:


$('#finicio').on('click', function(e) { // add event submit
  coordenadas()
    .then(function success(location) {
      // enviamos al server los datos 
    })
    .catch(function error(error) {
      // mostramos al usuario que hubo un error
    });
})

También podemos usar $.when, antes no te funcionaba porque este método pide que los argumentos pasados sean Thenables

Dependiendo de que versión de javascript es el que soporta tu proyecto, podés usar Asnyc/Await en vez de Promises. Esto es muy conveniente para poder evitar el famoso Callback Hell, que es muy propio de jQuery.

3
  • Esta tarde lo pruebo y te comento, eso es exactamente lo que pasa, el problema es que no sabia solucionarlo
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 11:59
  • Funciona perfecto!
    – ErnestoRM
    Commented el 19 jun. 2019 a las 12:08
  • @Yakume pues muchas gracias funciona perfecto y he aprendido como funciona la funcion Promise que no tenia ni idea de que existia
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 16:31
0

Si ya te funciona la primera función, entonces usa una variable global y lo que debes hacer es declarar una variable al inicio de tu código por ejemplo.

 var geo_posicion = [];

o si es un string

var geo_posicion = "";

y luego dentro de la función de coordenadas(); metes el resultado en en esa misma variable por ejemplo

 respuesta_coordenadas = window.geo_posicion;

Y de esta forma cuando la necesites usar en otra función solo usas por ejemplo...

var locacion = window.geo_posicion;
3
  • Buenas, muchas gracias por tu respuesta pero no me gustaria tener que usar variables globales para esto
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 10:27
  • Y ¿ya intentaste poner los punto y coma al final de cada variable y funcion que tienes arriba? porque por lo que vi todo esto esta sin punto y coma coordenadas() var cod=$('#trabajador').val() var linea=$('#linea').val() var turno=$('#turno').val() var fecha=$('#fecha').val() Commented el 19 jun. 2019 a las 10:30
  • punto y coma en jquery?, es totalmente opcional a no ser que tengas saltos de lineas extraños
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 10:33
0

¿Y si pruebas a "darle la vuelta"?

Si el problema está en que necesitas el resultado de una función para usarlo en otra, ¿por qué no escribes el código de la segunda dentro de la primera?

quedaría más o menos así:

  function coordenadas() {
    navigator.geolocation.getCurrentPosition(function(location) {
        $('#latitud').val(location.coords.latitude);
        $('#longitud').val(location.coords.longitude);
        var latitude=(location.coords.latitude);
        var longitude=(location.coords.longitude);
        var map;
        var center = {lat: location.coords.latitude, lng: location.coords.longitude};
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: center,
                zoom: 6
            });
            var marker = new google.maps.Marker({
                position: {lat: location.coords.latitude, lng: location.coords.longitude},
                map:map,
                title: 'Ubicacion'
            });
        }
        initMap();
    });

        var cod=$('#trabajador').val()
        var linea=$('#linea').val()
        var turno=$('#turno').val()
        var fecha=$('#fecha').val()
        var latitud=$('#latitud').val()
        var longitud=$('#longitud').val()
        $.ajax({
            url: 'ajax/firmainicio.php',
            type: 'POST',
            data: {
                cod:cod,
                linea:linea,
                turno:turno,
                fecha:fecha,
                latitud:latitud,
                longitud:longitud
            },
            success: function (response) {
                if (response=="null"){
                    $('#myModal1').modal('toggle');
                }
                else{
                    $('#myModal').modal('toggle');

                }
            }
        });
    }
}

$('#finicio').on('click', function(e){ // add event submit

    coordenadas()
});
3
  • porque las coordenadas las coge en muchas funciones, tengo fichar inicio de jornada, fichar final de jornada, ver posicion actual del trabajador, etc
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 10:49
  • Entiendo, es necesario que la función coordenadas() se mantenga separada del otro código..
    – ErnestoRM
    Commented el 19 jun. 2019 a las 10:59
  • exacto, la función coordenadas simplemente tiene que sacar las coordenadas y pintarlas en algún sitio o bien devolverlas, pero poniendo un return tampoco me funciona así que... ni idea
    – KeTeMeTo
    Commented el 19 jun. 2019 a las 11:15

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.