En este tutorial crearemos como conocer una ubicación de usuario en pantalla usando JavaScript. Este código localizará y mostrará la información de la ubicación del usuario cuando se haga clic en el botón. El código usa onclick () para iniciar un método que localizará el paradero del usuario usando la geolocalización de notación de puntos, una función incorporada que tiene varias funcionalidades que sirven como un localizador GPS. Este programa es fácil de usar. Siéntase libre de usarlo en su sistema.
Usaremos JavaScript para permitirle implementar cosas complejas en páginas web. Le permite crear contenido de actualización dinámica y agregar algo visual interactivo para las transacciones del usuario.
Empezando:
Este es el enlace para la rutina de carga que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Conocer la Ubicación de un Usuario en JavaScript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-6">
<button class="btn btn-primary" onclick="getLocation()">Obtener Ubicación</button>
<br /><br />
<div class="alert alert-info">Ubicación del usuario</div>
<div class="alert alert-danger">
<h3>Latitud:<br />
<span id="latitude"></span></h3>
<h3>Longitud:<br />
<span id="longitude"></span>
</h3>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Creando el Script:
Este código contiene el script de la aplicación. Este código mostrará la ubicación del usuario cuando se haga clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos como se muestra a continuación dentro del editor de texto y guárdelo como script.js dentro del directorio js
var latitude;
var longitude;
function getLocation(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(a) {
latitude = a.coords.latitude;
longitude = a.coords.longitude;
document.getElementById('latitude').innerHTML = latitude;
document.getElementById('longitude').innerHTML = longitude;
});
}else{
alert('Geo Locacion no Encontrada.');
}
}
Ahí lo tienes, creamos con éxito como conocer una ubicación de usuario en pantalla usando JavaScript.. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
