Géolocalisation HTML5

La géolocalisation HTML5 est utilisée pour localiser l'emplacement de l'utilisateur.

Localiser l'emplacement de l'utilisateur

L'API de géolocalisation HTML5 est utilisée pour obtenir l'emplacement 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.

Prise en charge des navigateurs

Internet Explorer 9+, Firefox, Chrome, Safari et Opera prennent en charge la géolocalisation.

Remarque : La géolocalisation est plus précise pour les appareils dotés d'un GPS, tels que l'iPhone.

Détecter si le navigateur prend en charge :

if (navigator.geolocation) { 
   //console.log("浏览器支持!"); 
   }else { 
      // console.log("浏览器不支持!");
 }

navigator.geolocation est utilisé pour obtenir l'emplacement géographique de l'utilisateur actuel en fonction du navigateur, fournissant 3 Méthodes :

void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置
int watchCurrentPosition(onSuccess,onError,options);//持续获取当前用户位置
void clearWatch(watchId);//watchId 为watchCurrentPosition返回的值//取消监控

rrree

Gestion des erreurs et des rejets

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 :

Instance

实例：
<!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>

Formation continue

nouveau fichier

<!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,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } } </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Géolocalisation HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]