Estoy trasteando con un programa en JavaScript que coge tus coordenadas reales y te las muestra en pantalla a la vez que las sube a una base de datos con PHP. Yo no sé mucho de JavaScript y el código está hecho ahora mismo de forma que cada x segundos te da de nuevo tus coordenadas y las sube a la base de datos. Tiene un botón de detener pero no funciona muy bien y tampoco es lo que estoy buscando.
Yo lo que quiero es que al pulsar el botón de Iniciar, te muestre una sola vez tus coordenadas y las suba una sola vez a la base de datos, pero no sé cómo hacerlo. Este es el código JavaScript en cuestión, os agradecería muchísimo que pudierais ayudarme.
if (!"geolocation" in navigator) {
return alert("Tu navegador no soporta el acceso a la ubicación. Intenta con otro");
}
const RUTA_API = "./insert.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);```
