Maison > Article > interface Web > Exemple de tutoriel sur l'analyse de la géolocalisation HTML5

Exemple de tutoriel sur l'analyse de la géolocalisation HTML5

零下一度original: 2017-05-26 16:02:581897parcourir

Adresse github de la démo de test : github.com/lily1010/html5_geolocation

L'API de géolocalisation HTML5 est utilisée pour obtenir la localisation géographique de l'utilisateur. Étant donné que cette fonctionnalité peut violer la confidentialité des utilisateurs, les informations de localisation de l'utilisateur ne sont pas disponibles sans le consentement de l'utilisateur.

1 Recherche HTML5 basée sur un navigateur pour la localisation géographique

La fonction de positionnement GPS en HTML5 est encapsulée dans l'attribut navigator.geolocation. Il existe trois méthodes :

(1) getCurrentPosition n'obtient la position de l'utilisateur qu'une seule fois

(2) watchPosition renvoie la position actuelle de l'utilisateur et continue de renvoyer la position mise à jour lorsque l'utilisateur se déplace (tout comme le GPS sur une voiture).

(3) clearWatch() - Arrêter la méthode watchPosition()

Le format des deux méthodes getCurrentPosition et watchPosition est

getCurrentPosition(successCallback, errorCallback, positionOptions) et watchPosition(successCallback, errorCallback, positionOptions)

(1) successCallback représente la fonction de rappel après que la fonction est appelée avec succès. Cette fonction prend un paramètre, au format littéral d'objet, indiquant l'acquisition des données de localisation de l'utilisateur.

HTML5 geolocation0

(2) errorCallback représente le code d'erreur renvoyé. Il contient les deux attributs suivants :

1、message：错误信息
2、 code：错误代码。

其中code错误代码包括以下四个值：
1 位置服务被拒绝
2 暂时获取不到位置信息
3 获取信息超时
4 未知错误

(3) Le format de données positionOptions est JSON, et il y a trois attributs facultatifs :

1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。

Voyons voir ci-dessous Voici un exemple de test : (Notez que le positionnement doit être activé avant de pouvoir voir l'effet)

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>基于浏览器的HTML5查找地理位置</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  <script>
  var options={
       enableHighAccuracy:true,   //高精度定位参数
       maximumAge:1000
   }
   function getLocation(){
       if(navigator.geolocation){
           //浏览器支持geolocation
           navigator.geolocation.getCurrentPosition(onSuccess,onError,options);  //getCurrentPosition 只获取一次用户的地理位置函数
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
           
           //navigator.geolocation.watchPosition(onSuccess,onError,options);  //watchPosition 继续获取用户的位置,适合于导航
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
       }else{
           //浏览器不支持geolocation
           alert (&#39;您的浏览器暂不支持定位&#39;);
       }
   }
   //成功时
   function onSuccess(position){
     //返回用户位置
     //经度
     var longitude =position.coords.longitude;
     
     //纬度
     var latitude = position.coords.latitude;
     
     //精确度
     var accuracy = position.coords.accuracy;
     
     //高度精确度
     var altitudeAccuracy = position.coords.altitudeAccuracy;
     
     //设备正北顺时针前进的方位
     var heading = position.coords.heading;
     
     //设备外部环境的移动速度(m/s)
     var speed = position.coords.speed;
     
     //当位置捕获到时的时间戳
     var timestamp = position.timestamp;
     
     document.getElementById("container").innerHTML= "您的经度是="+longitude+&#39;<br>&#39;
     +"您的纬度是="+latitude+&#39;<br>&#39;+"您的精确度是="+accuracy+&#39;<br>&#39;
     +"您的高度精确度是="+altitudeAccuracy+&#39;<br>&#39;+"您的设备正北顺时针前进的方位是="+heading+&#39;<br>&#39;
     +"您的设备外部环境的移动速度(m/s)是="+speed+&#39;<br>&#39;+"您的当位置捕获到时的时间戳是="+timestamp+&#39;<br>&#39;;
   }
   //失败时
   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>
   <p id="container" style="300px;height: 300px"></p>
</body>
</html>

Il est préférable de tester le code ci-dessus sur un téléphone mobile, car Google Chrome est bloqué en Chine, vous connaître le positionnement

2 appels de géolocalisation HTML5 API de carte Baidu

Adresse manuelle de la carte Baidu : développeur.baidu.com/map/jsdemo-mobile.htm#i7_1

Notez à l'avance que html5 n'est pas un positionnement précis, il y a donc toujours une erreur de plusieurs centaines de mètres lors de la visualisation de l'effet sur la carte

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>基于浏览器的HTML5查找地理位置和调取百度地图api</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 百度API -->
         <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  
  <script>
   var options={
       enableHighAccuracy:true,   //高精度定位参数
       maximumAge:1000
   }
   function getLocation(){
       if(navigator.geolocation){
           //浏览器支持geolocation
           navigator.geolocation.getCurrentPosition(onSuccess,onError,options);  //getCurrentPosition 只获取一次用户的地理位置函数
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
           
           //navigator.geolocation.watchPosition(onSuccess,onError,options);  //watchPosition 继续获取用户的位置,适合于导航
           //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
       }else{
           //浏览器不支持geolocation
           alert (&#39;您的浏览器暂不支持定位&#39;);
       }
   }
   //成功时
   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);
     map.addOverlay(new BMap.Marker(point)); //在地图上你的位置显示红色点点
   }
   //失败时
   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>
   <p id="container" style="300px;height: 300px"></p>
</body>
</html>

Le code ci-dessus a été testé sur le téléphone portable L'erreur est un peu importante. . Il n'est toujours pas adapté pour un positionnement précis. Il est toujours bon de se positionner en ville

【Recommandations associées】

1 Tutoriel vidéo en ligne gratuit h5<.>

Exemple de code d'API HTML5-Géolocalisation

html5 navigator.geolocation obtient la casse du code de localisation géographique en fonction du navigateur

Guide HTML5 (4) - Explication détaillée de l'utilisation de la géolocalisation

Explication détaillée de l'exemple de partage de code de géolocalisation Html5 pour obtenir des informations de localisation géographique6.

Explication détaillée de la façon d'utiliser l'API de géolocalisation de HTML5

API de géolocalisation HTML5 et algorithme de distance géospatiale Haversine (graphiques et texte)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'explication de l'interface HTML5 DragEventArticle suivant：Exemple d'explication de l'interface HTML5 DragEvent

Articles Liés

Voir plus