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/