communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Géolocalisation HTML5

L'API de géolocalisation HTML5 est utilisée pour obtenir la localisation géographique de l'utilisateur.

Remarque : étant donné que cette fonctionnalité peut violer la vie privée de l'utilisateur, les informations de localisation de l'utilisateur ne sont pas disponibles à moins que l'utilisateur n'accepte. Le navigateur affichera un rappel. lorsque vous utilisez cette fonctionnalité.


1. Plusieurs méthodes de positionnement géographique

Adresse IP, GPS, Wifi, GSM/CDMA

2. Processus d'acquisition de localisation géographique

1. il faut obtenir une demande.

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 interrogera les informations pertinentes sur l'appareil.

4. Le navigateur envoie des informations pertinentes à un serveur de localisation fiable, et le serveur renvoie l'emplacement géographique spécifique.

3. Prise en charge du navigateur

IE9.0+, FF3.5+, Safari5.0+, Chrome5.0+, Opera10.6 + Prise en charge géolocalisation.

Remarque : pour les appareils dotés d'un GPS, tels que l'iPhone (IPhone3.0+, Android2.0+), la géolocalisation est plus précise.

4. Méthodes de géolocalisation en HTML5

L'API de géolocalisation existe dans l'objet navigateur et ne contient que 3 méthodes :

1. getCurrentPosition //Position actuelle

2. watchPosition //Position de surveillance

3. clearWatch //Effacer la surveillance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>

Analyse d'instance :

Détectez si la géolocalisation est prise en charge

Si elle est prise en charge, exécutez la méthode getCurrentPosition(). S'il n'est pas pris en charge, un message s'affiche à l'intention de l'utilisateur.

Si getCurrentPosition() s'exécute avec succès, un objet coordonnées est renvoyé à la fonction spécifiée dans le paramètre showPosition

La fonction showPosition() obtient et affiche la longitude et la latitude

Gestion des erreurs et rejet

Le deuxième paramètre de la méthode getCurrentPosition() est utilisé pour gérer les erreurs. Il précise la fonction à exécuter en cas d'échec de l'obtention de la localisation de l'utilisateur :

function showError(error)
{
switch(error.code)
request "
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML= "Les informations de localisation ne sont pas disponibles. erreur de cas.TIMEOUT:
x .innerHTML="La demande de localisation de l'utilisateur a expiré."
                                                                                                                              }
}




Méthode getCurrentPosition() - renvoie les données


Si la position est obtenue avec succès, la méthode getCurrentPosition() renvoie l'objet. Les propriétés de latitude, de longitude et de précision sont toujours renvoyées. Si disponibles, les autres propriétés suivantes sont renvoyées.
Propriétés                                                                                        Latitude de numéro du système

coords.longitude Longitude décimale coords.accuracy Précision de la position

coords. altitude Altitude, en mètres au-dessus du niveau de la mer

coords.altitudeAccuracy Précision de la position Précision de l'altitude coords.heading Direction, en degrés à partir du nord géographique

coords.speed Vitesse, en mètres /seconde


horodatage Date/heure de réponse

Vous pouvez également obtenir la localisation géographique (uniquement pris en charge par Firefox)

p.address.country pays

p.address.region Province

p.address.city Ville

Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>基于浏览器的HTML5查找地理位置</title> <!-- 百度API --> <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> <script> function getLocation(){ var options={ enableHighAccuracy:true, maximumAge:1000 } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ //浏览器不支持geolocation } } //成功时 function onSuccess(position){ //返回用户位置 //经度 var longitude =position.coords.longitude; //纬度 var latitude = position.coords.latitude; //使用百度地图API //创建地图实例 var map =new BMap.Map("container"); //创建一个坐标 var point =new BMap.Point(longitude,latitude); //地图初始化，设置中心点坐标和地图级别 map.centerAndZoom(point,15); } //失败时 function onError(error){ switch(error.code){ case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } } window.onload=getLocation; </script> </head> <body> <!-- 结果会显示位置服务被拒绝 --> <div id="container" style="width:600px;height:600px"></div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492410 joue