11496 sujets

JavaScript, DOM et API Web HTML5

Variable javascript dans une balise <li> (avec data-*)

Bonjour,

Je souhaite mettre en place une carte interactive personnelle avec la géolocalisation de l'utilisateur.
Pour afficher ma carte, j'utilise le plug in FWD Megazoom .

J'utilise la géolocalisation html5 pour déterminer l'emplacement de l'utilisateur sur une image.

Le 1er script basé sur l'API google (partie du code):

function successCallback(position){
    var LatM = position.coords.latitude;
    var LongM = position.coords.longitude;
    document.getElementById("LatM").innerHTML = position.coords.latitude;
    document.getElementById("LongM").innerHTML = position.coords.longitude;
};


J'obtiens bien la longitude et latitude de l'utilisateur :


Mon 2eme script est une règle de 3 pour convertir les coordonnées géographique en pixel (partie du code): 

function calcul() {
	var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
	var Hmarker = ResH * imgheight;
	document.getElementById("repereLpos").innerHTML = Lmarker;
	document.getElementById("repereHpos").innerHTML = Hmarker;
}


J'obtiens bien la hauteur et la largeur en pixel :

<p>
    Point.Largeur : <span id="repereLpos"></span><br>
    Point.Hauteur : <span id="repereHpos"></span><br>
</p>


J'aimerais reporter repereLpos & repereHpos dans la page html qui affiche le marqueur sous cette forme :

<!-- MARQUEUR POSITION --> 
<ul data-markers="">
	<li
	  data-marker-type=tooltip
	  data-show-content=yes
	  data-reg-point=centerbottom 
	  data-marker-normal-state-path=marker1.png 
	  data-marker-selected-state-path=marker1-rollover.png 
	  data-marker-left=          <--  ici repereLpos  -->
	  data-marker-top=          <--  ici repereHpos  -->
	  data-marker-width=28
	  data-marker-height=36 
	  data-show-after-zoom-factor=0>
		<div class="InfoDiv">Vous etes ici</div>
	</li>
</ul>


Je peux agir sur data-marker-left / -top avec le code ci-dessous mais seulement si j'entre des chiffres:

<script language="javascript">
var listeLi,element;
 
var element = document.getElementById('coo');

element.setAttribute("data-marker-left", "300");
element.setAttribute("data-marker-top", "300");

</script>


Je vois pas comment inserer des variables dans ma liste <li id="coo" ...

Avez vous une solution ?
Merci d'avance
Je comprend pas très bien... soit je vois pas bien soit je suis con lol mais tu as déjà tes variables que tu peux utiliser juste avec :

element.setAttribute("data-marker-left", Lmarker);
element.setAttribute("data-marker-top", Hmarker);

non ??
En principe oui mais non Smiley decu je pense que le problème vient du fichier .js du plug in Megazoom qui gere l'affichage de la carte et des marker :

Vous pouvez me dire si vous voyez quelque chose qui pourrait empêcher l'affichage de variables (en fait autre chose que des nombres) dans cette portion de code :

m=FWDUtils.hasAttribute(h,"data-marker-left");if(!m){r.showMarkerError("data-marker-left",b);return}
m=FWDUtils.hasAttribute(h,"data-marker-top");if(!m){r.showMarkerError("data-marker-top",b);return}
 
m=FWDUtils.hasAttribute(h,"data-marker-width");if(!m){r.showMarkerError("data-marker-width",b);return}m=FWDUtils.hasAttribute(h,"data-marker-height");if(!m){r.showMarkerError("data-marker-height",b);return}m=FWDUtils.hasAttribute(h,"data-show-after-zoom-factor");if(!m){r.showMarkerError("data-show-after-zoom-factor",b);return}l.type=FWDUtils.getAttributeValue(h,"data-marker-type");f=l.type=="link"||l.type=="tooltip"||l.type=="infowindow";if(!f){r.showMarkerTypeError(l.type,b);return}if(FWDUtils.hasAttribute(h,"data-show-content")){if(FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-show-content"))=="no"){y=false}else{y=true}}else{y=true}l.normalStatePath_str=FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-marker-normal-state-path"));l.selectedStatePath_str=FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-marker-selected-state-path"));l.toolTipLabel=FWDUtils.getAttributeValue(h,"data-tool-tip-label")||undefined;
 
l.markerX=(FWDUtils.getAttributeValue(h,"data-marker-left"));if(isNaN(l.markerX))l.markerX=0;
l.markerY=(FWDUtils.getAttributeValue(h,"data-marker-top"));if(isNaN(l.markerY))l.markerY=0;


Merci
Tout tes link de page js sont bien dans la même page ?

si tu fais un alert(Lmarker); ça t'affiche quoi ?

est-ce-que cette ligne fonctionne correctement ?
document.getElementById("repereLpos").innerHTML = Lmarker;

car au pire tu récupère le contenu de cet élément pour le réutiliser.
Bonjour,

Tous les scripts sont dans la même page, y a un lien qui pointe vers le .js du plug in pour l'affichage du marker.

Avec un alert sur Lmarker, j'obtiens bien le résultat de mon calcul.

J'affiche en bas de ma page le résultat de document.getElement... comme ça :

    <span id="repereLpos"></span><br>
    <span id="repereHpos"></span><br>


Ça m'affiche le résultat du calcul en pixel.

C'est pour ça que j'ai l'impression que le script .js du plug in pose problème....
salut,
j'ai du mal à comprendre également, le problème n'est pas clairement exposé.
J'ai l'impression que tu parles du fait qu'après calculs, tes données ne sont pas retranscrites ? Si c'est le cas, je suppose que c'est parce que ces attributs dans les <li> sont vides au chargement du script et que vu que tu les établies dynamiquement, ton plugin ne reçoit rien.
Ou alors il est tard et je suis totalement à côté ^^
voilà les calculs... j'ai du faire sauter un truc, ça ne renvoi rien Smiley ohwell

le script de géolocalisation :

    <!-- Géolocalisation -->
<script type="text/javascript">
if (navigator.geolocation)
var watchId = navigator.geolocation.watchPosition(successCallback,
                                  errorCallback,
                                  {enableHighAccuracy:true});
								  else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
   
function successCallback(position){
	
	var LatM = position.coords.latitude;
	var LongM = position.coords.longitude;
      document.getElementById('LatM').innerHTML = position.coords.latitude;
      document.getElementById('LongM').innerHTML = position.coords.longitude;
      document.getElementById('prec').innerHTML = position.coords.accuracy;
      document.getElementById('speed').innerHTML = position.coords.speed;
    };


Ce qui m’intéresse ici, c'est LatM & LongM

Mon script de calcul :

<script>
function calcul() {

        //  paramètres de mon image 
        var Lat1 = 43.926839;  
	var Long1 = 5.217955;  
	
	var Lat2 = 43.964239;  //43.844239
	var Long2 = 5.252307;  //5.112307
	
	var imgwidth = 836;
	var imgheight = 667;
        // fin des  paramètres de mon image 

        //Récupération de LatM & LongM  <- vide  [decu]
	var Xstr, Ystr;
	var X, Y;
	Xstr = document.getElementById("LatM").innerHTML;      
	Ystr = document.getElementById("LongM").innerHTML;   
	X = parseFloat(Xstr);    
	Y = parseFloat(Ystr);    
		
        // Début du calcul

	//if (LongM<Long1 && LongM>Long2) {alert("Vous n'êtes pas dans la zone !");}
	//else {Hmap= Math.abs(Long2 - Long1);}
	Hmap = Math.abs(Long2 - Long1);
	
	//if (LatM<Lat1 && LatM>Lat2) {alert("Vous n'êtes pas dans la zone !");}
	//else {Lmap= Math.abs(Lat2 - Lat1);}
	Lmap = Math.abs(Lat2 - Lat1);
		
	var LPosRel = Math.abs(Y - Long1);
	var HPosRel = Math.abs(X - Lat1);
		
	var ResL = LPosRel / Hmap;
	var ResH = HPosRel / Lmap;
		
	var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
	var Hmarker = ResH * imgheight;
		
	document.getElementById("repereLpos").innerHTML = Lmarker;
	document.getElementById("repereHpos").innerHTML = Hmarker;
	}
</script>


et dans ma page html :

<body onload="calcul();">
    <p>
    <span id="LatM"></span><br>
    <span id="LongM"></span><br><br>
    Précision : <span id="prec"></span><br>
    <span id="repereLpos"></span><br>
    <span id="repereHpos"></span><br>
	</p>         
</body>
Je suppose toujours (sans avoir vraiment vu le code) que tu récupères les données avant que la géolocalisation ne soit faite.
mmh exact, dû au body onload="calcul();" qui lance apparemment le calcul avant que la géolocalisation soit chargée...

Y a un moyen de définir un ordre pour l’exécution des scripts dans ma page ? (quelque chose comme defer ?)
Bon ok c'est vrai que ça marche mieux comme ça Smiley smile

Merci !!

Donc maintenant, j'ai une seule fonction qui gère la géolocalisation, mon calcul.. J'aimerais comprendre pourquoi le petit script qui agit sur le <li> du marqueur ne peut être placé qu'après ce code :

<!-- MARQUEUR POSITION -->
		<ul data-markers="">
			<li id="coo"
			data-marker-type="tooltip"
			data-show-content="yes"
			data-reg-point="centerbottom"
			data-marker-normal-state-path="marker1.png"
			data-marker-selected-state-path="marker1-rollover.png"
			data-marker-left=""
			data-marker-top=""
			data-marker-width="28"
			data-marker-height="36"
			data-show-after-zoom-factor="0"
            >
			<div class='InfoDiv'>Vous etes ici</div>
			</li>
		</ul>
<!-- --FIN POSITION -->
<script language="javascript">
var listeLi,element;
 
var element = document.getElementById('coo');
//recuperation des valeurs

//modifications des valeurs 
element.setAttribute("data-marker-left", Lmarker);  
element.setAttribute("data-marker-top", Hmarker); 

</script>


Placé comme ça, le javascript ne récupère pas les variables Lmarker / Hmarker...

J'ai essayé avec des chiffres en dur pour définir la position du marqueur sur la page, ça marche si je place le script sous <li> et pas dans ma fonction
Modifié par Web_greg (07 May 2014 - 11:16)
Sujet clos
Aller à