Comment utiliser la géolocalisation en HTML5

Cette fois, je vais vous montrer comment utiliser le géopositionnement HTML5. Quelles sont les précautions lors de l'utilisation du géopositionnement HTML5 Voici des cas pratiques, jetons un coup d'œil.

La géolocalisation est l'une des fonctionnalités importantes de HTML5. Elle fournit la fonction de déterminer l'emplacement de l'utilisateur. Grâce à cette fonctionnalité, des applications basées sur des informations de localisation peuvent être développées. L'article d'aujourd'hui vous présentera les principes de base de la géolocalisation HTML5 et l'exactitude des données de chaque navigateur.

Avant d'accéder aux informations de localisation, le navigateur demandera à l'utilisateur s'il souhaite partager ses informations de localisation. En prenant le navigateur Chrome comme exemple, si vous autorisez le navigateur Chrome à partager votre position avec le site Web, le navigateur Chrome le fera. envoyer la localisation Google Le service envoie des informations sur le réseau local pour estimer votre position. Le navigateur partage ensuite votre position avec les sites Web qui demandent votre position.

L'API de géolocalisation HTML5 est très simple à utiliser. La méthode d'appel de base est la suivante :

 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示浏览器获取高精度的位置，默认为false
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        timeout: 5000,
        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

locationError est la fonction de rappel qui ne parvient pas à obtenir les informations de localisation. Il peut demander des informations en fonction du type d'erreur :

 locationError: function(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}

LocationSuccess est une fonction de rappel qui obtient avec succès des informations de localisation. Les données renvoyées contiennent des informations telles que la longitude et la latitude. Combinées avec l'API Google Map, l'actuelle. les informations de localisation de l'utilisateur peuvent être affichées sur la carte, comme suit :

 locationSuccess: function(position){
    var coords = position.coords;    
    var latlng = new google.maps.LatLng(
        // 维度
        coords.latitude,
        // 精度
        coords.longitude
    );  
    var myOptions = {  
        // 地图放大倍数  
        zoom: 12,  
        // 地图中心设为指定坐标点  
        center: latlng,  
        // 地图类型  
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    // 创建地图并输出到页面  
    var myMap = new google.maps.Map(  
        document.getElementById("map"),myOptions  
    );  
    // 创建标记  
    var marker = new google.maps.Marker({  
        // 标注指定的经纬度坐标点  
        position: latlng,  
        // 指定用于标注的地图  
        map: myMap
    });
    //创建标注窗口  
    var infowindow = new google.maps.InfoWindow({  
        content:"您在这里<br/>纬度："+  
            coords.latitude+  
            "<br/>经度："+coords.longitude  
    });  
    //打开标注窗口  
    infowindow.open(myMap,marker); 
}

Après les tests, les informations de localisation obtenues par les quatre navigateurs Chrome/Firefox/Safari/Opera sont exactement les mêmes. utilisent tous le même service de localisation. Les données sont les suivantes :

Et le navigateur IE est différent des données obtenues par les navigateurs ci-dessus. est la suivante :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois !

Lecture recommandée :

Explication détaillée de l'utilisation du mode Historique dans H5

Enregistrements d'utilisation du stockage local et du stockage de session

Explication détaillée de l'utilisation de la base de données indexeddb

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!