Géolocalisation HTML5

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 du navigateur

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

Remarque : la géolocalisation n'est disponible que pour les appareils dotés d'un GPS, tels que l'iPhone, la géolocalisation est disponible plus précis.

HTML5 - Utilisation de la géolocalisation

Veuillez utiliser la méthode getCurrentPosition() pour obtenir la position de l'utilisateur.

L'exemple suivant est un exemple de géolocalisation simple qui renvoie la longitude et la latitude de l'emplacement de l'utilisateur :

<!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);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        x.innerHTML="纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude;
    }
</script>
</body>
</html>

Exécutez le programme pour l'essayer

Exemple d'analyse :

Détectez si la géolocalisation est prise en charge

Si elle est prise en charge, exécutez la méthode getCurrentPosition(). S'il n'est pas pris en charge, un message s'affiche à l'intention de l'utilisateur.

Si getCurrentPosition() s'exécute avec succès, un objet coordonnées est renvoyé à la fonction spécifiée dans le paramètre showPosition

La fonction showPosition() obtient et affiche la longitude et la latitude

L'exemple ci-dessus est un script de géolocalisation très basique sans gestion des erreurs.

Gestion des erreurs et des rejets

Le deuxième paramètre 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 localisation de l'utilisateur :

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

Exécutez le programme pour l'essayer

Code d'erreur :

Autorisation refusée - L'utilisateur n'autorise pas la géolocalisation

Position indisponible - Impossible d'obtenir la position actuelle

Délai d'expiration - L'opération a expiré

Afficher résultats sur la carte

Pour afficher les résultats sur la carte, vous devez accéder à un service de cartographie pouvant utiliser la latitude et la longitude, comme Google Maps ou Baidu Maps :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        var latlon=position.coords.latitude+","+position.coords.longitude;
        var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
                +latlon+"&zoom=14&size=400x300&sensor=false";
        document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
    }
    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>

Exécutez le programme et essayez-le

Dans l'exemple ci-dessus, nous utilisons les données de latitude et de longitude renvoyées pour afficher l'emplacement dans Google Maps (en utilisant une image statique).

Exemple

Comment utiliser le script Google Maps pour afficher une carte interactive avec des marqueurs, des options de zoom et de glissement.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='250px';
        mapholder.style.width='500px';
        var myOptions={
            center:latlon,zoom:14,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
    }
    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>

Exécutez le programme et essayez-le

Étant donné Informations de localisation

Cette page montre comment afficher la position de l'utilisateur sur la carte. Cependant, la géolocalisation est également utile pour obtenir des informations sur un emplacement donné.

Exemple :

Mettre à jour les informations locales
Afficher les points d'intérêt autour de l'utilisateur
Système de navigation automobile interactif (GPS)

Méthode getCurrentPosition() - renvoie les données

En cas de succès, la méthode getCurrentPosition() renvoie l'objet. Les propriétés de latitude, de longitude et de précision sont toujours renvoyées. Si disponibles, les autres propriétés suivantes sont renvoyées.

< td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"> <🎜>Description<🎜><🎜>< / tr> < td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">Altitude, en mètres au-dessus du niveau de la mer< /tr >

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计

Attributs<🎜><🎜>

coords.latitude

Latitude du nombre décimal

coords.longitude

Nombre décimal Longitude

coords . précision

Précision de la position

coords.altitude

coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

Objet de géolocalisation

watchPosition() - Renvoie la position actuelle de l'utilisateur et continue de renvoyer la position mise à jour à mesure que l'utilisateur se déplace ( c'est-à-dire comme un GPS dans une voiture).

clearWatch() - Arrête la méthode watchPosition()

L'exemple suivant montre la méthode watchPosition(). Vous aurez besoin d'un appareil GPS précis pour tester cet exemple (comme un iPhone) :

<!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.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
  }
</script>
</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); } else{x.innerHTML="该浏览器不支持获取地理位置。";} } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </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]