Estoy tratando de obtener la longitud y la latitud en la URL. Hasta ahora encontré muchos temas diferentes en Internet, pero nada funciona. Publico aquí el html que muestra el problema.
la salida después de hacer clic en el botón "Mostrar posición" muestra su posición y cambia la URL en el navegador con esa longitud y latitud
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function showPosition() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")"; document.getElementById("result").innerHTML = positionInfo; var longitude = position.coords.longitude; var latitude = position.coords.latitude; const gotoURL = new URL(window.location.href); gotoURL.searchParams.set('longitude', longitude); gotoURL.searchParams.set('latitude', latitude); window.location.href = gotoURL; }); } else { alert("Sorry, your browser does not support HTML5 geolocation."); } } </script> </head> <body> <div id="result"> <!--Position information will be inserted here--> <!--Position information will be inserted here--> </div> <button type="button" onclick="showPosition();">Show Position</button> </body> </html> const uri = `http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude}`; ¡Vaya! No tienes una variable llamada lattitude .
Puede hacerlo más fácil para usted desestructurando las propiedades del objeto coords ...
const { latitude, longitude } = position.coords;... y utilícelos en la cadena de plantilla. Y ahorra un poco de código teniendo que repetir cosas.
Entonces, su código podría verse así.
const result = document.getElementById('result'); const lat = document.getElementById('lat'); const lng = document.getElementById('lng'); navigator.geolocation.getCurrentPosition(function(position) { const { latitude, longitude } = position.coords; const positionInfo = `Your current position is Latitude: ${latitude}, Longitude: ${longitude}`; result.textContext = positionInfo; lat.textContent = latitude; lng.textContent = longitude; const uri = `http://177.0.0.6:5001/?lng=${longitude}&lng=${latitude}`; });Aquí hay algunas cosas que no están bien... pero intentemos arreglarlas por ti...
Los elementos no existen. Supongo que ya existían antes de que publicaras esto en SO. Como se publicó anteriormente, hacen que Javascript se rompa.
var long = (document.getElementById('longi').innerHTML = position.coords.longitude); var lat = (document.getElementById('latti').innerHTML = position.coords.latitude);Está configurando un montón de texto (¿depurado?) Y LUEGO (intentando) cambiar la URL. Si todo funciona correctamente, no verás el texto, o lo verás momentáneamente.
var positionInfo = ...Cuando intenta cambiar la ubicación, las variables que intenta usar (longitud y latitud) no existen. Esto se debe a que las variables declaradas dentro de una función solo existen en esa función (alcance). Puede declarar las variables antes de la función de devolución de llamada, o puede establecer la ubicación de la ventana dentro de la función de devolución de llamada (esto es lo que recomendaría).
window.location.href = "http://177.0.0.6:5001/?' + longitude + '' + lattitude + '";También es notable que está creando la nueva URL de una manera extraña, sin que los parámetros de búsqueda tengan nombres. Terminaría con algo como 'http://177.0.0.5:5001?23.398208973.89383 - Tal vez esto es lo que buscas, pero lo dudo.
La forma más fácil de hacerlo funcionar es eliminar la línea que comienza con 'window.location.href' y reemplazar las dos primeras líneas que mencioné con las siguientes
const gotoURL = new URL(window.location.href); gotoURL.searchParams.set('longitude', longitude); gotoURL.searchParams.set('latitude', latitude); window.location.href = gotoURL;Esto aprovecha el generador de URL del navegador para que sea un poco más fácil crear URL.
Buena suerte, y te deseo todo lo mejor! ~JD