HTML5 implémente la fonction d'obtention d'informations de localisation géographique et de compétences didactiques de positionnement_html5

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.

Téléchargement du code source : Cliquez ici pour télécharger

Comment utiliser la fonction de géolocalisation HTML5

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. .

Copier le code

Le code est le suivant :

fonction getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("Le navigateur ne prend pas en charge la géolocalisation. "
}
}

Le code ci-dessus peut savoir que si l'appareil 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. .
Regardons 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 :

Copier le code

Le code est le suivant :

function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED :
alert ("Échec du positionnement, l'utilisateur a refusé de demander la géolocalisation");
break;
case error.POSITION_UNAVAILABLE:
alert("Échec du positionnement, les informations de localisation ne sont pas disponibles"); > case error. TIMEOUT :
alert("Échec du positionnement, la demande d'obtention de la localisation de l'utilisateur a expiré");
break;
case error.UNKNOWN_ERROR :
alert("Échec du positionnement, échec du système de positionnement). ");
break;
}
}


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

Copier le codeLe code est le suivant :

fonction showPosition(position){

var lat = position.coords.latitude; //Latitude
var lag = position.coords.longitude; //Longitude
alert('Latitude : 'lat',Longitude :' lag); >}

Utilisez les interfaces Baidu Maps et Google Maps pour obtenir l'adresse de l'utilisateur

Nous avons appris ci-dessus que la géolocalisation de HTML5 peut obtenir la latitude et longitude, donc ce que nous devons faire, c'est convertir la longitude et la latitude abstraites en informations de localisation géographique lisibles et significatives pour les utilisateurs réels. 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.

Copier le code

Le code est le suivant :

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('正在定位...');
},
succès : function (json) {
if(json.status==0){
$("#baidu_geo ").html(json.result.formatted_address);
}
},
erreur : fonction (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon "地址位置获取失败");
}
});
});

再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口，接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细，我们可以根据需求将需要的信息展示给div#google_ge o。

复制代码

代码如下 :

function showPosition(position){
var latlon = position.coords.latitude ',' position.coords.longitude;

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

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用。当然这只是一个简单的应用，我们可以根据这个简单的示例开发出很多复杂的应用，建议用手机浏览器访问DEMO演示。