Guide HTML5-4. Utiliser la géolocalisation pour implémenter la fonction de positionnement

Auteur：Eve Cole Date de mise à jour：2025-04-02 19:00:04

Ce que nous voulons apprendre aujourd'hui, c'est d'utiliser la géolocalisation pour implémenter des fonctions de positionnement. Nous pouvons obtenir l'objet Geolocation via Navigation.Geolocation, qui fournit les méthodes suivantes:

GetCurrentPosition (rappel, errorCallback, Options): Obtenez l'emplacement actuel;

WatchPosition (rappel, erreur, options): Commencez à surveiller la position actuelle;

ClearWatch (ID): Arrêtez de surveiller l'emplacement actuel.

Remarque: Le navigateur utilisé dans l'exemple suivant est Chrome. En utilisant d'autres navigateurs, je ne peux pas garantir que les résultats en cours d'exécution sont cohérents avec les résultats affichés par l'exemple.

1. Obtenez l'emplacement actuel

Nous utiliserons la méthode GetCurrentPosition pour obtenir la position actuelle. Les informations de position ne seront pas retournées directement sous la forme d'un résultat. Nous devons utiliser la fonction de rappel pour le traiter. Il y aura un certain retard dans l'obtention de coordonnées, et vous vous demanderez également des autorisations d'accès. Regardons l'exemple suivant:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

Tableau {Border-Collapse: s'effondrer;}

th, td {rembourrage: 4px;}

th {text-agne: à droite;}

</ style>

</ head>

<body>

<tr>

<th> longitude: </th>

<th> latitude: </th>

</tr>

<tr>

<h> Altitude: </th>

<h> Précision: </th>

</tr>

<tr>

<h> Précision d'altitude: </th>

</tr>

<tr>

<h> Speed: </th>

<h> horodatage: </th>

</tr>

</ table>

<cript>

Navigator.Geolocation.getCurrentPosition (DisplayPosition);

fonction affliblose (pos) {

Var Properties = ['Longitude', 'Latitude', 'Altitude', 'Altitude', 'Précision', 'AltududuaCuracy', 'Heading', 'Speed'];

for (var i = 0, len = properties.length; i <len; i ++) {

var valeur = pos.coords [propriétés [i]];

document.getElementById (Properties [i]). innerHtml = valeur;

}

document.getElementById ('horodatage'). innerHtml = pos.timestamp;

}

</cript>

</docy>

</html>

L'objet de position retourné contient deux propriétés, Coords: Retour des informations sur les coordonnées; Timestamp: le temps d'obtenir des informations de coordonnées. Parmi eux, les coordonnées comprennent les propriétés suivantes: latitude: latitude; longitude: longitude; Altitude: hauteur; Précision: précision (compteur); AltutudeAcuracy: précision de hauteur (compteur); En-tête: direction de voyage; Vitesse: vitesse de voyage (mètre / seconde).

Toutes les informations ne seront pas retournées, cela dépend de l'appareil que vous hébergez le navigateur. Les appareils mobiles tels que GPS, les accélérateurs et la boussole renverront la plupart des informations, mais les ordinateurs domestiques ne fonctionneront pas. Les informations de localisation obtenues par un ordinateur domestique dépendent de l'environnement réseau ou du WiFi. Examinons les résultats en cours d'exécution de l'exemple ci-dessus.

Cliquez sur Autoriser pour obtenir des informations de coordonnées.

2. Gérer les exceptions

Maintenant, nous présentons la gestion des exceptions de GetCurrentPosition, qui est implémentée en utilisant la fonction de rappel ErrorCallback. L'erreur de paramètre renvoyée par la fonction contient deux propriétés, code: code du type d'erreur; Message: message d'erreur. Le code contient trois valeurs: 1: l'utilisateur n'est pas autorisé à utiliser la géolocalisation; 2: Les informations de coordonnées ne peuvent pas être obtenues; 3: Le délai d'information est obtenu.

Regardons un exemple ci-dessous:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

Tableau {Border-Collapse: s'effondrer;}

th, td {rembourrage: 4px;}

th {text-agne: à droite;}

</ style>

</ head>

<body>

<tr>

<th> longitude: </th>

<th> latitude: </th>

</tr>

<tr>

<h> Altitude: </th>

<h> Précision: </th>

</tr>

<tr>

<h> Précision d'altitude: </th>

</tr>

<tr>

<h> Speed: </th>

<h> horodatage: </th>

</tr>

<tr>

<th> Code d'erreur: </ th>

<h> Message d'erreur: </th>

</tr>

</ table>

<cript>

Navigator.Geolocation.getCurrentPosition (DisplayPosition, HandleError);

fonction affliblose (pos) {

Var Properties = ["Longitude", "Latitude", "Altitude", "Précision", "AltutudeAcuracy", "Heading", "Speed"];

pour (var i = 0; i <propriétés.length; i ++) {

var valeur = pos.coords [propriétés [i]];

document.getElementById (Properties [i]). innerHtml = valeur;

}

document.getElementById ("horodat"). innerHtml = pos.timestamp;

}

Fonction HandleError (err) {

document.getElementById ("errcode"). innerHtml = err.code;

document.getElementById ("errMessage"). innerHtml = err.Message;

}

</cript>

</docy>

</html>

L'autorisation est refusée, Résultat de l'opération:

3. Utilisez des éléments de paramètre en option de la géolocalisation facultative

Les options de GetCurrentPosition (rappel, errorCallback, Options) ont les paramètres suivants à utiliser, Activer Highgacuratie: Utilisez le meilleur effet; Timeout: temps mort (millisecondes); Maximum: spécifiez le temps de cache (millisecondes). Jetons un coup d'œil à l'exemple suivant:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

Tableau {Border-Collapse: s'effondrer;}

th, td {rembourrage: 4px;}

th {text-agne: à droite;}

</ style>

</ head>

<body>

<tr>

<th> longitude: </th>

<th> latitude: </th>

</tr>

<tr>

<h> Altitude: </th>

<h> Précision: </th>

</tr>

<tr>

<h> Précision d'altitude: </th>

</tr>

<tr>

<h> Speed: </th>

<h> horodatage: </th>

</tr>

<tr>

<th> Code d'erreur: </ th>

<h> Message d'erreur: </th>

</tr>

</ table>

<cript>

Var Options = {

Activer la hausse de la hausse: faux,

Timeout: 2000,

Maximum: 30000

};

Navigator.Geolocation.getCurrentPosition (DisplayPosition, HandleError, Options);

fonction affliblose (pos) {

Var Properties = ["Longitude", "Latitude", "Altitude", "Précision", "AltutudeAcuracy", "Heading", "Speed"];

pour (var i = 0; i <propriétés.length; i ++) {

var valeur = pos.coords [propriétés [i]];

document.getElementById (Properties [i]). innerHtml = valeur;

}

document.getElementById ("horodat"). innerHtml = pos.timestamp;

}

Fonction HandleError (err) {

document.getElementById ("errcode"). innerHtml = err.code;

document.getElementById ("errMessage"). innerHtml = err.Message;

}

</cript>

</docy>

</html>

4. Modifications de l'emplacement du moniteur

Ci-dessous, nous introduisons l'utilisation de la méthode WatchPosition pour mettre en œuvre des changements de position. Sa méthode d'utilisation est la même que GetCurrentPosition. Regardons l'exemple:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

Tableau {Border-Collapse: s'effondrer;}

th, td {rembourrage: 4px;}

th {text-agne: à droite;}

</ style>

</ head>

<body>

<tr>

<th> longitude: </th>

<th> latitude: </th>

</tr>

<tr>

<h> Altitude: </th>

<h> Précision: </th>

</tr>

<tr>

<h> Précision d'altitude: </th>

</tr>

<tr>

<h> Speed: </th>

<h> horodatage: </th>

</tr>

<tr>

<th> Code d'erreur: </ th>

<h> Message d'erreur: </th>

</tr>

</ table>

<Button id = "PressMe"> Annuler Watch </futton>

<cript>

Var Options = {

Activer la hausse de la hausse: faux,

Timeout: 2000,

Maximum: 30000

};

var watchId = Navigator.Geolocation.WatchPosition (DisplayPosition, HandleError, Options);

document.getElementById ("PressMe"). OnClick = fonction (e) {

Navigator.Geolocation.ClearWatch (WatchId);

};

fonction affliblose (pos) {

Var Properties = ["Longitude", "Latitude", "Altitude", "Précision", "AltutudeAcuracy", "Heading", "Speed"];

pour (var i = 0; i <propriétés.length; i ++) {

var valeur = pos.coords [propriétés [i]];

document.getElementById (Properties [i]). innerHtml = valeur;

}

document.getElementById ("horodat"). innerHtml = pos.timestamp;

}

Fonction HandleError (err) {

document.getElementById ("errcode"). innerHtml = err.code;

document.getElementById ("errMessage"). innerHtml = err.Message;

}

</cript>

</docy>

</html>

Lorsque le bouton Annuler la montre est cliqué, la surveillance s'arrête.

Adresse de téléchargement de démo: html5guide.geolocation.zip