Discussion :

[Web-Greg]

Bonjour,

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 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 vois pas comment inserer / appeler du javascript dans la partie html.

La balise <li> n'accepte pas d'autre balise (<script type="text/javascript"> ...... / data-marker-left id="reperePos) "

Avez vous une solution ?
Merci d'avance

[le_chomeur]

Bonjour , comme indiqué dans ton exemple, passé par les attributs data :

au moment de construire la liste ( en htm ) tu poses les donnée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
data-marker-left="XXX"
data-marker-top="YYY"

ou en js , tu récupères le li dont tu as besoins puis tu ajoutes des attributs data :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
monelement.dataset.marker-left = "XXX";
monelement.dataset.marker-top = "YYY";

dataset n'étant pas géré par tous les navigateurs, tu dois vérifier si cette propriété existe, sinon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// Modification d'une valeur
monelement.setAttribute('data-marker-left') = 'XXX';
// Récupération de la valeur
var long = monelement.getAttribute('data-marker-left');

cordialement

[Web-Greg]

Merci pour ton aide !

element.dataset. est en effet une balise que je ne connais pas. J'ai lu pas mal de chose sur internet histoire d'en savoir plus.
Ça a l'air simple et pratique mais je vois pas comment l'adapter dans mon cas, les deux scripts sont sur la même page, j'ai essayé en me basant sur ton exemple... sans résultat.

pour résumer, je déclare mon <li> le plus simplement possible :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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="Lmarker"
	data-marker-top id="repereHpos"
	data-marker-width="28"
	data-marker-height="36"
	data-show-after-zoom-factor="0"
>
	<div class='InfoDiv'>Vous etes ici</div>
</li>

Et ensuite dans un js dans ma page, j’appelle la ligne data.marker.left / .top avec les variables de mon marqueur.

J'oublie une manip, est ce qu'il faut pointer le <li id="" ??

Merci encore une fois pour ton aide

[NoSmoking]

Bonjour,

J'oublie une manip, est ce qu'il faut pointer le <li id="" ??

pour atteindre un élément il faut effectivement que l'on puisse le retrouver et une des solutions c'est la récupération via son ID.

Une question quand même quel est l'intérêt de stocker les informations dans un élément DOM et pas directement dans un objet javascript.

[Web-Greg]

Merci pour ton aide.

Je ne peux pas répondre à ta question, une partie du script était déjà en place avant que je reprenne la main...

Pour le moment, mon marker ne bouge pas. Je pense y être pour quelque chose. :-(

Mon script de calcul me donne ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
...
var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
var Hmarker = ResH * imgheight;
 
//alert("LMarkeur  : " + Hmarker);
//alert("HMarkeur : " + Lmarker);
 
document.getElementById("repereLpos").innerHTML = Lmarker;
document.getElementById("repereHpos").innerHTML = Hmarker;
 
alert("Largeur : " + Lmarker);
alert("Hauteur : " + Hmarker);
...

Mon marker est affiché comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul data-markers="" id="coo">
     <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="xx"
		data-marker-top="yy"
		data-marker-width="28"
		data-marker-height="36"
		data-show-after-zoom-factor="0"
     >
          <div class='InfoDiv'>Vous etes ici</div>
     </li>
</ul>

Et c'est là que ça va pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="javascript">
function marker() {
 
     var element = document.getElementById('coo');
 
     //Récupérer une valeur :
     //var left = element.dataset.marker.left;
     //var top = element.dataset.marker.top;
 
     //Modifier une valeur
     element.dataset.marker.left = "xx";
     element.dataset.marker.top = "yy";
     //var Lmarker = monelement.getAttribute('data-marker-left');
 
     element.dataset.marker.left = "repereLpos";    //repereLpos ou Lmarker ??
}
</script>

[le_chomeur]

voici un exemple concret

http://jsfiddle.net/Qgue6/

[Web-Greg]

Merci pour le lien, j'ai fait plusieurs essais dont celui là :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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="400"    < -- position de mon marqueur depuis le haut gauche de mon image
		data-marker-top="200"    < -- idem depuis le haut de mon image
		data-marker-width="28"
		data-marker-height="36"
		data-show-after-zoom-factor="0"
        >
	<div class='InfoDiv'>Vous etes ici</div>
	</li>
</ul>

Et le script pour agir sur data-marker-left et top :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var listeLi,monelement;
 
//listeLi =  document.getElementById('coo');
var monelement = document.getElementById('coo');
 
//recuperation des valeurs
var xx = monelement.getAttribute("data-marker-left")
var yy = monelement.getAttribute("data-marker-top")
 
//modifications des valeurs
monelement.setAttribute("data-marker-left") = "300";
monelement.setAttribute("data-marker-top") = "150";

Ça vous semble correct comme syntaxe ?

[Bovino]

La première chose incorrecte, c'est de mettre une div dans un <ul> !
Une liste ne peut contenir que des balises <li> comme enfant.

[Web-Greg]

compris, j'utilise le plug in Megazoom Image Viewer pour afficher ma carte.
C'est une partie de leur code que j'ai posté (la partie Liste).

[NoSmoking]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
//modifications des valeurs 
monelement.setAttribute("data-marker-left") = "300";
monelement.setAttribute("data-marker-top") = "150";

Ton utilisation de la méthode setAttribute est incorrecte, objet.setAttribute( nom, valeur);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
//modifications des valeurs
monelement.setAttribute("data-marker-left", "300");
monelement.setAttribute("data-marker-top", "150");

tu pourrais également passer par les dataset mais en prenant garde à la façon de les récupérer.

[Web-Greg]

Génial, ça fonctionne bien !! Merci

Il est possible d'appeler une variable ici à la place des chiffres ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
//modifications des valeurs 
monelement.setAttribute("data-marker-left") = "300";
monelement.setAttribute("data-marker-top") = "150";

Y a t'il une syntaxe particulière pour appeler les variables qui sont dans une fonction en entete de ma page ??

Merci pour votre aide

[NoSmoking]

Il est possible d'appeler une variable ici à la place des chiffres ?

un petit essai ne t'as pas tenté

[EDIT]
ne pas tenir compte de la proposition ci dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
//modifications des valeurs 
var ma_variable_1 = "300",
    ma_variable_2 = "150";
monelement.setAttribute("data-marker-left") = ma_variable_1;
monelement.setAttribute("data-marker-top")  = ma_variable_2;

[Web-Greg]

J’apprécie vraiment ton aide.

Si j'ai bien essayé de faire des test mais là j'ai l'impression de ramer comme jamais alors que c'est la dernière étape du projet.

Je mets en place ta méthode demain matin et reviens certainement vite....

Merci pour ton aide !

[Web-Greg]

Bonjour,

Je viens d'essayer avec ta syntaxe, ça ne marche que si je rentre des chiffres ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
monelement.setAttribute("data-marker-left", "150");
monelement.setAttribute("data-marker-top", "300");

J'ai l'impression que le problème vient du fichier javascript qui gère l'affichage de l'image et des marqueurs...

A part ça, je vois pas pourquoi je ne pourrais pas indiquer dans ma liste, les variables d'une fonction (dans l'en tête de ma page)...

[NoSmoking]

j'ai recopier une grosse ANERIE signalée au post #10 qui plus est re

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
//modifications des valeurs 
var ma_variable_1 = "300",
    ma_variable_2 = "150";
monelement.setAttribute("data-marker-left", ma_variable_1);
monelement.setAttribute("data-marker-top", ma_variable_2);

[Web-Greg]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
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 !