Comment utiliser la fonction de géolocalisation HTML5_jquery

HTML5 fournit une fonction de géolocalisation (API de géolocalisation), qui peut déterminer la localisation de l'utilisateur. Nous pouvons utiliser cette fonctionnalité de HTML5 pour développer des applications basées sur des informations de géolocalisation. Cet article utilise des exemples pour partager avec vous comment utiliser HTML5 et utiliser les interfaces Baidu et Google Maps pour obtenir des informations de localisation géographique précises des utilisateurs.

La géolocalisation est une nouvelle fonctionnalité de HTML5, elle ne peut donc fonctionner que sur les navigateurs modernes prenant en charge HTML5, en particulier les appareils portables tels que les iPhones, où la géolocalisation est plus précise. Nous devons d'abord détecter si le navigateur de l'appareil de l'utilisateur prend en charge la géolocalisation et, si c'est le cas, obtenir les informations géographiques. Notez que cette fonctionnalité peut porter atteinte à la vie privée de l'utilisateur. Sauf accord de l'utilisateur, les informations de localisation de l'utilisateur ne sont pas disponibles. Par conséquent, lorsque nous accédons à l'application, il nous sera demandé si nous devons autoriser la géolocalisation. .

 
function getLocation(){ 
  if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
  }else{ 
    alert("浏览器不支持地理定位。"); 
  } 
} 

Le code ci-dessus permet de savoir que si la machine utilisateur prend en charge la géolocalisation, la méthode getCurrentPosition() est exécutée. Si getCurrentPosition() s'exécute avec succès, un objet coordonnées est renvoyé à la fonction spécifiée dans le paramètre showPosition. Le deuxième paramètre showError de la méthode getCurrentPosition() est utilisé pour gérer les erreurs. Il spécifie la fonction à exécuter en cas d'échec de l'obtention de la position de l'utilisateur. .
Examinons d'abord la fonction showError(), qui stipule certaines méthodes de gestion des codes d'erreur en cas d'échec de l'obtention de la localisation géographique de l'utilisateur :

function showError(error){ 
  switch(error.code) { 
    case error.PERMISSION_DENIED: 
      alert("定位失败,用户拒绝请求地理定位"); 
      break; 
    case error.POSITION_UNAVAILABLE: 
      alert("定位失败,位置信息是不可用"); 
      break; 
    case error.TIMEOUT: 
      alert("定位失败,请求获取用户位置超时"); 
      break; 
    case error.UNKNOWN_ERROR: 
      alert("定位失败,定位系统失效"); 
      break; 
  } 
} 

Regardons à nouveau la fonction showPosition(), appelant la latitude et la longitude des coordonnées pour obtenir la latitude et la longitude de l'utilisateur.

function showPosition(position){ 
  var lat = position.coords.latitude; //纬度 
  var lag = position.coords.longitude; //经度 
  alert('纬度:'+lat+',经度:'+lag); 
} 

Utilisez les interfaces Baidu Maps et Google Maps pour obtenir les adresses des utilisateurs
Ci-dessus, nous avons appris que la géolocalisation de HTML5 peut obtenir la longitude et la latitude de l'utilisateur. Nous devons donc convertir la longitude et la latitude abstraites en informations de localisation géographique lisibles et significatives pour l'utilisateur réel. Heureusement, Baidu Maps et Google Maps fournissent des interfaces à cet égard. Il suffit de transmettre les informations de longitude et de latitude obtenues par HTML5 à l'interface cartographique, et la situation géographique de l'utilisateur sera renvoyée, y compris les informations sur la province et la ville, et même les rues. Numéro de maison et autres informations détaillées de localisation géographique.
Nous définissons d'abord le div pour afficher l'emplacement géographique sur la page, en définissant respectivement id#baidu_geo et id#google_geo. Il suffit de modifier la fonction clé showPosition(). Examinons d'abord l'interaction de l'interface de la carte Baidu. Nous envoyons les informations de latitude et de longitude à l'interface de la carte Baidu via Ajax, et l'interface renverra les informations correspondantes sur la province, la ville et la rue. L'interface cartographique Baidu renvoie une chaîne de données JSON Nous pouvons afficher les informations requises dans div#baidu_geo en fonction de nos besoins. Notez que la bibliothèque jQuery est utilisée ici et que le fichier de la bibliothèque jQuery doit être chargé en premier.

 
function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude; 
   
  //baidu 
  var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 
  $.ajax({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
    beforeSend: function(){ 
      $("#baidu_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
      if(json.status==0){ 
        $("#baidu_geo").html(json.result.formatted_address); 
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#baidu_geo").html(latlon+"地址位置获取失败"); 
    } 
  }); 
}); 

Regardons l'interaction de l'interface Google Maps. De même, nous envoyons les informations de latitude et de longitude à l'interface Google Maps via Ajax, et l'interface renverra les détails de la province, de la ville et de la rue correspondantes. L'interface Google Map renvoie également une chaîne de données JSON. Ces données JSON sont plus détaillées que celles renvoyées par l'interface cartographique Baidu. Nous pouvons afficher les informations requises dans div#google_geo selon nos besoins.

function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude; 
 
  //google 
  var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
  $.ajax({ 
    type: "GET", 
    url: url, 
    beforeSend: function(){ 
      $("#google_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
      if(json.status=='OK'){ 
        var results = json.results; 
        $.each(results,function(index,array){ 
          if(index==0){ 
          $("#google_geo").html(array['formatted_address']); 
          } 
        }); 
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#google_geo").html(latlon+"地址位置获取失败"); 
    } 
  }); 
} 

Le code ci-dessus intègre respectivement l'interface cartographique Baidu et l'interface cartographique Google dans la fonction showPosition(), que nous pouvons appeler en fonction de la situation réelle. Bien entendu, il ne s'agit que d'une application simple. Nous pouvons développer de nombreuses applications complexes basées sur cet exemple simple. Il est recommandé d'utiliser un navigateur mobile pour accéder à la démonstration DEMO.