Consulta API GeoLocation HTML5 y JS

Estimados,

les vengo con una duda muuuuy novata, estoy tratando de agregar a mi formulario de LOGIN la funcion para guardar en mi base de datos la informacion de GEOLOCALIZACION del usuario que se loguea.

Mi codigo de prueba basico es:

<script>
var Lat=0,Lon=0,crd;
function success(pos) {
crd = pos.coords;
Lat=crd.latitude;
Long=crd.longitude;
}

navigator.geolocation.getCurrentPosition(success);

alert(Lat);
</script>

Entiendo que hay un tema dificil de entender (para mi novates) respecto al uso de variables clousure, pero no de verdad, no lo entiendo, si alguien pudiera explicarme un poco el concepto y ayudarme con el codigo, lo agradeceria muchooo!

Saludos!

El código funciona bien, pero no hace lo que esperas que haga.

En Javascript muchas cosas funcionan de forma asíncrona. Te voy a explicar el proceso que hace tu código:
- Creas las variables de coordenadas.
- Pides la geolocalización del usuario.
- El navegador envíe un mensaje al usuario para saber si este quiere compartir la ubicación. Mientras espera, continúa con la ejecución del código.
- El navegador muestra el alert. Lat aún no está lleno, por lo que muestra 0.
- Cuando el usuario da permiso, se ejecuta la función success, y se llenan las variables con los datos correspondientes.


Lo que realmente pasa es que la función success no se ejecuta en el orden en el que la escribes, sino que funciona de forma asíncrona. Deja a la función en espera hasta que el usuario responda y la función obtenga la geolocalización, y mientras tanto continúa ejecutando el resto del código. Es exactamente el mismo patrón que se usa en peticiones AJAX

Por eso, cuando muestras el alert, la variable Lat aún no se ha llenado. Prueba a ponerlo dentro de la función success.

Código Javascript :

function success(pos) {
  console.log('Datos de geolocalización adquiridos.',
              'Longitud:', pos.coords.longitude,
              'Latitud:', pos.coords.latitude);
}

console.log('Pidiendo Geolocalización...');
navigator.geolocation.getCurrentPosition(success);

Ahora, cuando necesites usar los datos, tienes dos opciones. Puedes comprobar si ya se han guardado los datos, o puedes llamar a la función que los necesita desde dentro de success.

Código Javascript :

function success(pos) {
  // La función mostrar_coordenadas muestra las coordenadas en el formulario
  mostrar_coordenadas(pos.coords.latitude, pos.coords.longitude);
}

Sobre las variables la mejor práctica es que crees un namespace cuando necesitas tener datos globales, y siempre usar var para el resto de variables. Por ejemplo así:

Código Javascript :

var App = {};
App.coords = {};

function success(pos) {
  var lat = pos.coords.latitude;
  var lon = pos.coords.longitude;
  App.coords.lat = lat;
  App.coords.lon = lon;
}

Así evitas crear otra variable con el mismo nombre en otra parte del código que rompa lo anterior.

Las variables declaradas con var pertenecen a la función en la que se declaran, y no son accesibles desde fuera. Si no usas var para declarar una variable, esta será global y accesible desde cualquier parte de la aplicación. Esto es un problema porque puedes tener otra variable con el mismo nombre en otra parte del código a la que le estás cambiando en valor, y entonces ocurrirán cosas malas. Por eso trata de seguir esa práctica y no habrá confusión.

Alivan escribió:

Perdón, por mensaje anterior! puse CITAR despues y borro lo que había escrito!

Gracias por la paciencia y voluntad de darme toda la explicación!

Creo haber entendido, pero parece que no, por que el código que hice no me funciona.

Mi intención final es tener los datos en una variable para poder enviarlos via POST AJAX, y supongo que no es la mejor practica hacer el post dentro de la función succes, por que junto con esos datos mando por post los datos de LOGIN.

El código que probe en función de lo que entendi es este:

<script>

var App = {};
App.coords = {};

function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}

function success(pos) {
var lat = pos.coords.latitude;
var lon = pos.coords.longitude;
vercoord(lat,lon);
}

function vercoord(lat,long){
App.coords.lat=lat;
App.coords.lon=lat;
}

$(document).ready(function() {
localizame();
alert(App.coords.lat);
});
</script>

Si quieres mandar los datos de la geolocalización junto con los de login, mejor cambia la lógica. El usuario puede rechazar la geolocalización, o esta puede tardar en recogerse. En su lugar sería mejor que una vez hecho login enviases los datos por separado.

En este caso sí que tendrías que hacer la petición mediante AJAX dentro de la función success, pues cuando se ejecute es cuando sabrás que ya tienes los datos.