Introducción: En este artículo veremos cómo podemos obtener la posición geográfica de un usuario en HTML5.
Enfoque: para obtener la posición geográfica de un usuario en HTML5, utilizamos la API de geolocalización . La ubicación geográfica en HTML5 se utiliza para compartir la ubicación del usuario con algún sitio web si el usuario lo permite. Utiliza JavaScript para obtener la latitud y la longitud. La mayoría de los navegadores admiten la API de geolocalización.
Sintaxis:
var Ubicación =navigator.geolocalización.getCurrentPosition()
La ubicación variable de la sintaxis anterior tiene las siguientes propiedades:
- coords.latitude: siempre devuelve la latitud como un número decimal
- coords.accuracy: siempre devuelve la precisión de la posición
- coords.longitude: siempre devuelve la longitud como un número decimal
- coords.altitude: Devuelve la altitud en metros sobre el nivel del mar si está disponible
- coords.altitudeAccuracy: Devuelve la precisión de altitud de la posición si está disponible
- coords.heading: devuelve el rumbo en grados en el sentido de las agujas del reloj desde el norte, si está disponible
- coords.speed: Devuelve la velocidad en MPS si está disponible
- marca de tiempo: Devuelve la fecha o la hora de la respuesta, si está disponible
Ejemplo 1: en este ejemplo, mostraremos la longitud y la latitud del permiso del usuario mediante el objeto de ubicación creado mediante la API de geolocalización.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Latitude and longitude</title>
</head>
<body>
<center>
<h1 class="gfg" style="color:green;">
GeeksforGeeks
</h1>
<h2 id="Location"></h2>
</center>
<script>
var Location = document.getElementById("Location");
navigator.geolocation.getCurrentPosition(showLocation);
function showLocation(position) {
Location.innerHTML =
"Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Producción:
Producción
Ejemplo 2: En este ejemplo, estamos usando un Mapbox para mostrar la posición del usuario en el mapa usando la latitud y la longitud que obtuvimos allí. Estos son los pasos para crear un cuadro de mapa de Google:
Paso 1: agregue el siguiente script a la página HTML para habilitar la función de cuadro de mapa de Google.
<script src= "https://maps.google.com/maps/api/js?sensor=false"></script>
Paso 2: Cree un objeto lattlong que tenga coordenadas de longitud y latitud usando:
var lattlong = new google.maps.LatLng(latitude, longitude);
Paso 3: Cree Mapbox usando el siguiente código centrado en la posición del usuario en div con id Map:
var Mapmain = new google.maps.Map(document.getElementById("Map"));
A continuación se muestra la implementación del enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Latitude and longitude</title>
<script src=
"https://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<div id="Map" style="width:700px; height:500px"></div>
</center>
<script>
var Location = document.getElementById("Location");
navigator.geolocation.getCurrentPosition(showLocation);
function showLocation(position) {
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var Options = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions:
{ style: google.maps.NavigationControlStyle.SMALL }
}
var Mapmain = new google.maps.Map
(document.getElementById("Map"), Options);
var markerpos =
new google.maps.Marker
({ position: lattlong, map: Mapmain });
}
</script>
</body>
</html>
Producción:
Producción
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA