Géolocalisation HTML

Jusqu'à présent, nous avions vu de nombreuses fonctionnalités conçues en utilisant HTML. L'une des fonctionnalités les plus récentes et avancées incluses dans HTML est la géolocalisation. La géolocalisation HTML est très utile pour détecter l'emplacement d'un utilisateur sur une carte. Cette fonctionnalité est donc conçue en HTML pour identifier la position exacte de l'utilisateur sur la carte. Cette position de l'utilisateur peut être identifiée à l'aide d'attributs appelés latitude et longitude de la position spécifique de l'utilisateur. Cela peut récupérer des informations uniquement lorsque l'utilisateur lui permet d'accéder à l'emplacement. Cette fonctionnalité HTML est principalement utilisée à des fins commerciales locales, pour rechercher des restaurants ou choisir l'emplacement sur la carte.

Syntaxe

Voici la syntaxe de la géolocalisation HTML est la suivante : On peut utiliser l'API de localisation, qui utilisera l'objet navigateur global, qui est comme indiqué ci-dessous :

var locat = navigator.geolocation;

Dans le navigateur de syntaxe ci-dessus. Géolocalisation responsable du navigateur de l'utilisateur pour accéder à ses informations de localisation ; un accès est défini. Le navigateur peut fournir la meilleure fonctionnalité présente sur l'appareil, afin que l'on puisse facilement accéder à ces données.

Ces données sont accessibles efficacement en utilisant différentes manières comme getCurrentPosition pour connaître la position actuelle de l'utilisateur ou de l'appareil, watchPosition, ce qui est utile chaque fois que la position de l'appareil est modifiée et une autre manière comme clearWatch, qui aide à effacer tous les appels en fonctionnalité de géolocalisation.

Cette fonctionnalité fonctionne sur certaines interfaces qui sont les suivantes :

1. Géolocalisation : Il s'agit de l'une des API les plus importantes de la classe principale, qui comprend certaines méthodes qui permettent d'obtenir la position actuelle de l'utilisateur, de surveiller les changements de position, etc.
2. GeolocationPosition : Ceci est utilisé pour définir la position de l'utilisateur. Chaque fois qu'un appel réussi est identifié dans l'une des géolocalisations, il se coordonnera avec son instance d'objet.
3. Coordonnées de géolocalisation : Cela permet d'identifier les coordonnées de la position de l'utilisateur.
4. GeolocationPositionError: Cette interface est appelée pour que l'appel infructueux soit renvoyé dans les méthodes qui sont incluses dans la géolocalisation.
5. Géolocalisation : Ceci est utile lorsqu'une instance d'objet de géolocalisation est appelée en géolocalisation. Il est donc possible d'accéder à toutes les autres fonctionnalités à partir d'ici.

Méthodes de géolocalisation+63

Il existe au total 3 méthodes utilisées dans la géolocalisation HTML pour définir la position avec l'interface de géolocalisation ; ce sont les suivants :

1. getCurrentPosition() : Cette méthode de base de géolocalisation HTML permet de détecter l'emplacement géographique actuel de l'appareil ou de l'utilisateur et ses données de retour sur la carte. Cette méthode fonctionne sur différents paramètres comme le succès, l'erreur, les options.
2. watchPosition() : Chaque fois que l'utilisateur souhaite vérifier la position après le changement de l'emplacement de l'appareil, ceci est appelé dans le codage pour vérifier la position modifiée de l'appareil. Cette méthode invoque des fonctions de rappel d’erreur telles que les erreurs aléatoires inconnues. Les utilisateurs ne sont pas autorisés à partager leur position si les informations de localisation données ne sont pas disponibles et que la position demandée a expiré.
3. clearWatch() : on pourra peut-être annuler l'appel watchPosition() précédent et cela annulera l'appel watchPosition en cours en utilisant cette méthode de géolocalisation HTML

Exemple de géolocalisation HTML

Voici les exemples de géolocalisation HTML

Exemple n°1

Dans le premier exemple, nous allons voir si notre navigateur prendra en charge ou non cette fonctionnalité de géolocalisation ; voici le code comme mentionné ci-dessous :

Code HTML :

<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
</head>
<body>
<h4>HTML Geolocation</h4>
<button onclick="getlocation()">Click Here</button>
<br>
<br>
<br>
<p>As we all know, geolocation is the feature used for positioning the exact location of the user or device. But the first step we have to check whether our browser is going to support this geolocation feature or not. </p>
<h4> This Example illustrates whether our browser is going to support for geolocation or not.</h4>
<div id="geolocation1"></div>
<script>
var x= document.getElementById("geolocation1");
function getlocation() {
if(navigator.geolocation){
alert("My browser is going to support Geolocation feature")
}
else
{
alert("Oops! My browser is not going to support Geolocation feature")
}
}
</script>
</body>
</html>

Sortie :

Exemple n°2

Dans cet exemple, nous allons afficher l'emplacement exact avec la fonction de géolocalisation HTML, il affichera donc la position exacte sur la carte avec la valeur d'attribut pour la latitude et la longitude est la suivante :

Code HTML :

<!DOCTYPE html>
<html>
<body>
<h4>HTML Geolocation Latitude and Longitude Value</h4>
<p>Example showing Geolocation , It will give values for the latitude and longitude after clicking below button</p>
<button onclick="getLocation()">Click Here</button>
<p id="geolocation"></p>
<script>
var x = document.getElementById("geolocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showgeolocPosition);
} else {
x.innerHTML = "This code is not supported in geolocation for your browser";
}
}
function showgeolocPosition(position) {
x.innerHTML = "Latitude Attribute Value: "     + position.coords.latitude +
"<br>Longitude Attribute Value: "  + position.coords.longitude;
}
</script>
</body>
</html>

Sortie :

Après avoir cliqué sur le bouton, le résultat sera comme indiqué ci-dessous

Exemple #3

Dans cet exemple, nous allons afficher l'emplacement exact avec la fonction de géolocalisation HTML, il affichera donc la position exacte sur la carte avec la valeur d'attribut pour la latitude et la longitude est la suivante :

Code HTML :

<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<style>
#mapdemo{
width: 500px;
height: 500px;
margin-left: 200px;
}
</style>
<body>
<h2>Find Your Location on Google Map</h2>
<p>In this Example we are going to see exact location on Google map, where actually we are.</p>
<button onclick="getlocation();"> Show my position on Map </button>
<div id="mapdemo">
</div>
<script src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function getlocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else{
alert("Sorry! your Browser does not support Geolocation API")
}
}
// Current Poistion on Google Map
function showPos(position){
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var myOptions = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
}
var maps = new google.maps.Map(document.getElementById("mapdemo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"Your position on map!"});
}
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User or Device not allow to accept your request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer or Device exact location information is currently unavailable.");
break;
case error.TIMEOUT:
alert("Requested request is getting time out .");
break;
case error.UNKNOWN_ERROR:
alert("Something unknown error is accrued.");
break;
}
}        </script>
</body>
</html>

Sortie :

Fazit

Aus all den oben genannten Informationen haben wir erfahren, dass es sich bei der HTML-Geolokalisierung um eine Funktion handelt, die zur Identifizierung des Geräte- oder Benutzerstandorts auf einer Karte verwendet wird.

Es verwendet Breiten- und Längengradattribute, um die genaue Position des Benutzers zu identifizieren.

Diese Funktion funktioniert mit verschiedenen Methoden wie getCurrentPosition, watchPosition und clearWatch.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!