Problème api de localistion

Résolu/Fermé

Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023 - 27 août 2021 à 15:07
Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023 - 1 sept. 2021 à 14:35

Bonjour,

Je n'arrive pas à faire marché mon api de localisation en html. Si on pouvait me dire ce qui ne fonctionne pas dans mon code... Merci d'avance.

<html>
<head>
<title>Gestion du temps</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="" name="keywords">
<meta content="" name="author">
<meta content="" name="description">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="css/resetnav.css" type="text/css" rel="stylesheet">
<link href="css/index.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.9.1.custom.css"/>
<script src="javascript/jquery-1.8.2.js"></script>
<script src="javascript/jquery-ui-1.9.1.custom.js"></script>
<script src="javascript/afficher.js"></script>
<script>
var x = document.getElementById("loca");

function getLocation(){
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition, showError);
	} else { 
		x.innerHTML = "La [https://www.commentcamarche.net/geolocalisation/ Géolocalisation] n'est pas supportée par se navigateur.";
	}
}

function showPosition(position) {
	x.innerHTML = position.coords.latitude + "," + position.coords.longitude;
}

function showError(error) {
	switch(error.code) {
		case error.PERMISSION_DENIED:
			x.innerHTML = "L'utilisateur refuse la géolocalisation."
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML = "Les informations de géolocalisation sont indisponible."
			break;
		case error.TIMEOUT:
			x.innerHTML = "La demande d'obtention de l'emplacement de l'utilisateur a expiré."
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML = "Une erreur inconnue est survenue.."
			break;
	}
}
</script>
</head>
<body>
<div id="taille">
<div id="contain">
	<div id="ficheperso">
		<div id="util">
			<div id="pagebadge">
				<?php
				echo"<p id='messbadge'>$mess_err</p><br/>";
				?>
				<button onclick="getLocation()">Localisation</button>
				<form method="post" action="badgedel.php">
					<input type="hidden" id="codebadge" name="codebadge" value="<?php echo"$numidentifant" ?>" />
					<input id="loca" name="loca" /> 
					<input type="checkbox" name="mission" value="mission">Mission<br /><br />
					<span id="date_heure"></span>
					<script type="text/javascript">window.onload = date_heure('date_heure');</script>
					<br /><br />
					<input class="submit" type="submit" name="submit" value="Envoyer" />
				</form>
			</div>
		</div>
	</div>
</div>
<footer>
	<div id="pied_page">
	<ul>
		<li id="btndeco"><a href="deconnexion.php">Déconnection</a></li>
	</ul>
	</div>
</footer>
</body>
</html>

A voir également:

Problème api de localistion
Naz api - Guide
Supported api 3 en français - Forum Mobile
The native api dll was not found ✓ - Forum VirtualBox
Api darkibox - Guide
Steam api dll - Forum Jeux vidéo

5 réponses

Réponse 1 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
27 août 2021 à 17:18

Bonjour,

Si tu regardes dans la console js de ton navigateur, tu devrais avoir une erreur indiquant que la variable x est null.

En effet lorsque le navigateur charge le document html, il exécute les codes javascript dans la balises head sans attendre que le corps (body) de la page soit entièrement chargée.
L'instruction

var x = document.getElementById("loca");

ne récupère donc pas la balise ciblé (id="loca") car cette balise n'a pas encore été chargée lors de l'exécution de cette instruction.

Pour corriger ce problème, tu peux utiliser l’événement js DOMContentLoaded pour exécuter le code js uniquement après le chargement de la page. Ou tu peux aussi simplement déplacer la balise <script> dans la balise <head> pour la placer juste avant la fermeture de la balise </body>.

Enfin la propriété innerHTML permet de modifier le contenu d'une balise html.
La balise ciblé est une balise <input>, or cette balise ne possède pas de contenu (c'est une balise auto-fermante d'ailleurs, il n'est pas possible d'écrire <input>contenu</input> par exemple).
Le texte affiché dans la balise input est défini par l'attribut html value. En js, il faut donc utiliser la propriété value pour modifier le texte d'un input (donc x.value au lieu de x.innerHTML).

Bonne journée,

Réponse 2 / 5

Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023
Modifié le 31 août 2021 à 15:00

<html>
<head>
<title>Gestion du temps</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="" name="keywords">
<meta content="" name="author">
<meta content="" name="description">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="css/resetnav.css" type="text/css" rel="stylesheet">
<link href="css/index.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.9.1.custom.css"/>
<script src="javascript/jquery-1.8.2.js"></script>
<script src="javascript/jquery-ui-1.9.1.custom.js"></script>
<script src="javascript/afficher.js"></script>
</head>
<body>
<div id="taille">
<div id="contain">
 <div id="ficheperso">
  <div id="util">
   <p><?php echo"$message"; ?></p>
   <div id="pagebadge">
    <?php
    echo"<p id='messbadge'>$mess_err</p><br/>";
    ?>
    <button onclick="getLocation()">Localisation</button>
    <form method="post" action="badgedel.php">
     <input type="hidden" id="codebadge" name="codebadge" value="<?php echo"$numidentifant" ?>" />
     <input id="loca" name="loca" /> 
     <input id="long" name="long" /> 
     <input type="checkbox" name="mission" value="mission">Mission<br /><br />
     <span id="date_heure"></span>
     <script type="text/javascript">window.onload = date_heure('date_heure');</script>
     <br /><br />
     <input class="submit" type="submit" name="submit" value="Badge" />
    </form>
   </div>
  </div>
 </div>
</div>
<footer>
 <div id="pied_page">
 <ul>
  <li id="btndeco"><a href="deconnexion.php">Déconnection</a></li>
 </ul>
 </div>
</footer>
<script>
var x = document.getElementById("loca");
var l = document.getElementById("long");

function getLocation(){
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
 } else { 
  x.value = "La Géolocalisation n'est pas supportée par se navigateur.";
 }
}

function showPosition(position) {
 x.value = position.coords.latitude;
 l.value = position.coords.longitude;
}

function showError(error) {
 switch(error.code) {
  case error.PERMISSION_DENIED:
   x.value = "L'utilisateur refuse la géolocaliastion."
   break;
  case error.POSITION_UNAVAILABLE:
   x.value = "Les informations de géolocalisation sont indisponible."
   break;
  case error.TIMEOUT:
   x.value = "La demande d'obtention de l'emplacement de l'utilisateur a expiré."
   break;
  case error.UNKNOWN_ERROR:
   x.value = "Une erreur inconnue est survenue.."
   break;
 }
}

function prompt(window, pref, message, callback) {
    let branch = Components.classes["@mozilla.org/preferences-service;1"]
                           .getService(Components.interfaces.nsIPrefBranch);

    if (branch.getPrefType(pref) === branch.PREF_STRING) {
        switch (branch.getCharPref(pref)) {
        case "toujours":
            return callback(true);
        case "jamais":
            return callback(false);
        }
    }

    let done = false;

    function remember(value, result) {
        return function(){
            done = true;
            branch.setCharPref(pref, value);
            callback(result);
        }
    }

    let self = window.PopupNotifications.show(
        window.gBrowser.selectedBrowser,
        "geolocation",
        message,
        "geo-notification-icon",
        {
            label: "Partage de localisation",
            accessKey: "S",
            callback: function(notification) {
                done = true;
                callback(true);
            }
        }, [
            {
                label: "Toujours partager",
                accessKey: "A",
                callback: remember("toujours", true)
            },
            {
                label: "Jamais partager",
                accessKey: "N",
                callback: remember("jamais", false)
            }
        ], {
            eventCallback: function(event) {
                if (event === "dismissed") {
                    if (!done) callback(false);
                    done = true;
                    window.PopupNotifications.remove(self);
                }
            },
            persistWhileVisible: true
        });
}

prompt(window,
       "extensions.foo-addon.allowGeolocation",
       "Timer-online veut connaitre vôtre localisation.",
       function callback(allowed) { alert(allowed); });

</script>
</body>
</html>

Après les modifications ça marche sous chrome mais pas sous firefox ni edge...
j'ai tenté d'ajouter une fonction pour demander l'autorisation de localisé les personnes mais elle n'apparait pas (test en début et ensuite fin de code). Est ce que le fait se ne soit pas de l'htpps peut expliqué ça?

Réponse 3 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
31 août 2021 à 19:45

Le code js repris pour ajouter la demande d'autorisation est obsolète et ne semble plus fonctionner : en testant, la console js indique que l'objet Components est obsolète puis "Components.classes is undefined".

A priori ce code a été repris sur la version française de la doc de mozilla :
https://developer.mozilla.org/fr/docs/Web/API/Geolocation_API#demander_la_permission

La doc de mozilla a effectivement l'avantage d'être accessible en français mais les traductions ne sont pas forcément à jour, il faut prendre le réflexe de consulter également la version anglaise. Si tu regardes la version anglaise de cette page, tu pourras voir que l'exemple concernant la demande de permission a été supprimée.
Cette demande de permission n'est effectivement pas nécessaire car le navigateur doit déjà afficher une fenêtre pour demander cette autorisation (comme tu dois le voir sur Chrome).

En enlevant ce code, la géolocalisation fonctionne correctement sur mon poste autant sur Firefox que sur Edge.
Concernant le protocole https, la doc indique effectivement que la géolocalisation fonctionne uniquement dans un contexte sécurisé (donc avec https). Néanmoins en testant en local sur mon poste (via les protocole file:///C:/www/test.html et http://localhost/test.html), la géolocalisation fonctionne correctement.
Je n'ai pas testé avec une autre url mais si le problème vient du fait que https est requis, ceci devrait surement être indiqué dans la console js du navigateur.

Dans quel environnement est-ce que tu fais tes tests ? (en local via http://localhost/..., ou sur un serveur en ligne ?)
Est-ce que tu as des erreurs dans la console JavaScript de ton navigateur ?

Réponse 4 / 5

Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023
Modifié le 1 sept. 2021 à 12:04

j'ai supprimé l'appel à la fenêtre.

la seule erreur que j'ai c'est ça(en rapport avec la fenêtre qui fait apparaitre l'heure.):

Uncaught TypeError: date_heure is not a function
at badgedel.php:55

Je test sur un serveur en ligne. Je suppose donc que c'est liè au fait que se soit un serveur en ligne pour firefox et edge...

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
1 sept. 2021 à 11:47

L'erreur indiqué dans ton dernier message vient de la ligne suivante :

<script type="text/javascript">window.onload = date_heure('date_heure');</script>

Il faut supprimer cette ligne si elle ne sert à rien ou définir la fonction date_heure() dans ton code js.

Le fait que tu tests sur un serveur en ligne peut effectivement laisser supposer que le problème vient du https (ceci n'est pas indiqué dans la console js du navigateur ?), néanmoins il est étrange que ca fonctionne pour Chrome qui devrait en théorie avoir le même comportement.

Sinon peut-être un soucis au niveau du paramétrage des navigateurs Firefox et Edge (géolocalisation désactivé par défaut ?). Est-ce que l'exemple proposé sur la doc fonctionne avec ton navigateur Firefox ou Edge : https://developer.mozilla.org/fr/docs/Web/API/Geolocation_API#exemple_interactif

Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023
Modifié le 1 sept. 2021 à 14:35

J'ai supprimer la ligne en question.

Je viens de passer le site en htpps c'était bien liè à ça.

Je l'avais testé sur ton lien et ça marchait
Je suis un peu surpris aussi que le comportement sur Chrome ne soit pas le même que sur Edge et Firefox surtout que chrome est plus pointilleux sur la sécurité que les deux autres...

Merci pour ton aide.

Discussions similaires

steam_api.dll introuvable

problemes connus avec le pilote graphique

API plaques d'immatriculations

Récupérer cours de bourse pour un projet

Qu'est-ce que le processus "dolbyDAX2API"?

Discussions similaires

Newsletters