Résumé du développement et de l'application de l'interface API de positionnement géographique dans les compétences du didacticiel html5

Résumé du développement et de l'application de l'interface API de positionnement géographique dans les compétences du didacticiel html5_html5

WBOY

Libérer： 2016-05-16 15:50:40

original

1378 Les gens l'ont consulté

Plusieurs méthodes de positionnement par géolocalisation : adresse IP, GPS, Wifi, GSM/CDMA

Processus d'acquisition de géolocalisation :
1.
2. L'application demande l'emplacement géographique au navigateur, et le navigateur affiche une requête demandant à l'utilisateur s'il doit partager l'emplacement géographique.
3. En supposant que l'utilisateur le permet, le navigateur interroge les informations pertinentes auprès de l'appareil.
4. Le navigateur envoie des informations pertinentes à un serveur de localisation fiable, et le serveur renvoie l'emplacement géographique spécifique.

Mise en œuvre de la localisation géographique HTML5 :
1. Implémenter une technologie basée sur un navigateur (sans support back-end) pour obtenir la localisation géographique de l'utilisateur
2. localisation géographique (la précision peut atteindre 10 m, selon l'appareil)
3. Suivez en continu la localisation géographique de l'utilisateur
4 Interagissez avec Google Map ou Baidu Map pour présenter les informations de localisation

API de géolocalisation. est utilisé pour connecter les utilisateurs. Les informations de localisation géographique actuelle sont partagées avec des sites de confiance, ce qui implique des problèmes de confidentialité et de sécurité des utilisateurs. Par conséquent, lorsqu'un site doit obtenir la localisation géographique actuelle de l'utilisateur, le navigateur invite l'utilisateur à « autoriser » ou « . refuser".
Vérifiez d'abord quels navigateurs prennent en charge l'API de géolocalisation :
IE9.0, FF3.5, Safari5.0, Chrome5.0, Opera10.6, IPhone3.0, Android2.0
L'API de géolocalisation existe dans le navigateur l'objet ne contient que 3 méthodes :

Copier le code

Le code est le suivant :

1. getCurrentPosition //Position actuelle
2. watchPosition //Position de surveillance
3. clearWatch //Effacer la surveillance
navigator.geolocation.getCurrentPosition( …, function(error){
switch(error . code){
case error.TIMEOUT :
alert( " La connexion a expiré, veuillez réessayer" );
break;
case error.PERMISSION_DENIED :
alert( " Vous avez refusé de utiliser le service de partage de position, la requête a été annulée" );
break;
case error.POSITION_UNAVAILABLE :
alert( ", Désolé, les services de localisation sont temporairement indisponibles pour votre planète" );
break;
}
});

watchPosition est comme un tracker associé à clearWatch.
watchPosition et clearWatch fonctionnent un peu comme setInterval et clearInterval.
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5 fournit une série d'API telles que la localisation géographique à fournir Utilisateurs avec Il est pratique pour les utilisateurs de créer des applications géographiques LBS. Premièrement, dans les navigateurs prenant en charge HTML 5, lorsque l'API est activée, il sera demandé à l'utilisateur s'il accepte d'utiliser l'API, sinon elle ne sera pas activée. pour assurer la sécurité.
1. Activez-le pour déterminer si le navigateur prend en charge l'API LBS

Copier le code

Code comme suit :

function isGeolocationAPIAvailable()
{
var location = "Non, la géolocalisation n'est pas prise en charge par ce navigateur."; geolocation) {
location = "Oui, la géolocalisation est prise en charge par ce navigateur.";
}
alert(location);

Dans l'exemple ci-dessus, il y a toujours displayError Dans la méthode, l'exception est interceptée

2. Obtenez la localisation géographique de l'utilisateur
Utilisez simplement getCurrentPosition; >Copier le code

Le code est le suivant :

function requestPosition() { if (nav == null) { nav = window.navigator; }

if (nav != null) {

var geoloc = nav.geolocation;

if (geoloc != null) {
geoloc.getCurrentPosition(successCallback) ;
}
else {
alert("L'API de géolocalisation n'est pas prise en charge dans votre navigateur");
}
}
else {
alert("Le navigateur est introuvable ");
}
}

Lorsque la localisation géographique est obtenue avec succès, une méthode de rappel sera générée pour traiter le résultat renvoyé,

Copier le code

Le code est le suivant :

function setLocation(val, e) { document.getElementById(e .value = val; } function successCallback(position)

{

setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude") ;

}

3. Une question très courante est de savoir comment suivre l'emplacement géographique changeant de l'utilisateur. Voici un résumé des deux API utilisées

1 watchPosition.
L'exemple est le suivant :

Copier le code

Le code est le suivant :

Puis dans Dans le successCallback, vous pouvez paramétrer la dernière localisation géographique à afficher :

Copiez le code

Le code est la suivante :

function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); >}

Si vous ne souhaitez pas de suivi en temps réel, vous pouvez l'annuler :
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID); 🎜>}

4. Comment gérer les exceptions
Lorsque vous rencontrez une exception, vous pouvez l'attraper :

Copiez le codeLe code est le suivant :

if (geoloc != null) {

geoloc.getCurrentPosition(successCallback, errorCallback
); }
function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "Ce site Web n'est pas autorisé à use "
"l'API de géolocalisation";
break;
case error.POSITION_UNAVAILABLE:
message = "La position actuelle n'a pas pu être déterminée.";
break;
case error .PERMISSION_DENIED_TIMEOUT:
message = "La position actuelle n'a pas pu être déterminée "
"dans le délai d'attente spécifié."
break;
if (message == "") {
var strErrorCode = error.code.toString();
message = " La position n'a pas pu être déterminée en raison de "
"une erreur inconnue (Code : " strErrorCode ")."
}
alert(message);
}

5. Afficher l'emplacement sur Google Map (à condition que l'API Google Map et d'autres paramètres soient configurés)

Copier le code

Le code est le suivant :

fonction getCurrentLocation()

{

if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showMyPosition,showError );
}
else
{
alert("Non, l'API de géolocalisation est non pris en charge par ce navigateur.");
}
}
function showMyPosition(position)
{
var coordinates=position.coords.latitude "," position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
coordonnées "&zoom=14&size=300x300&sensor=false"
document.getElementById("googlemap") .innerHTML="

";
}
function showError(erreur)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("Ce site Web n'est pas autorisé à utiliser l'API de géolocalisation")
break
case error.POSITION_UNAVAILABLE:
alert("La position actuelle n'a pas pu être déterminé.")
break;
case error.TIMEOUT:
alert("La position actuelle n'a pas pu être déterminée.") la position n'a pas pu être déterminée dans le délai d'attente spécifié.")
break;
case error.UNKNOWN_ERROR:
alert("La position n'a pas pu être déterminée en raison d'une erreur inconnue.")
break;