Ajouter un marqueur à une image en javascript?

Question

Quelqu'un sait comment je peux ajouter un marqueur à une image (pas une carte) en Javascript? Idéalement, je voudrais un gestionnaire qui se comporte comme si on ajoutait un marqueur à une carte - c.-à-d. Onclick provoque l'affichage d'un marqueur au point sur lequel on a cliqué et renvoie les coordonnées de pixels x/y du point qui était cliqué.

Est-ce possible?

Vive Richard

Answer 1

Oui, il est possible.

Bien qu'il soit tout à fait faisable avec juste javascript, je voudrais utiliser une sorte de bibliothèque comme JQuery.

L'approche serait d'avoir un img-élément avec votre marqueur, puis ajouter un click -handler à l'image que vous souhaitez utiliser comme votre "carte" moves votre marqueur à l'endroit où l'élément a été cliqué.

Voici un exemple non testé:

<img src="marker.png" id="marker" style="display: none; position: absolute;" /> 
<img src="map.png" id="map" /> 

<script type="text/javascript"> 
$('#map').click(function(e) 
{ 
    $('#marker').css('left', e.pageX).css('top', e.pageY).show(); 
    // Position of the marker is now e.pageX, e.pageY 
    // ... which corresponds to where the click was. 
}); 
</script> 

---

Edit: Et cela est tout à fait possible sans JQuery aussi, bien sûr. Vous trouverez ci-dessous un exemple de code.

<img src="marker.png" id="marker" style="display: none; position: absolute;" /> 
<img src="map.png" id="map" /> 

<script type="text/javascript"> 
document.getElementById('map').onclick = function(e) 
{ 
    with(document.getElementById('marker')) 
    { 
     style.left = e.pageX; 
     style.top = e.pageY; 
     style.display = 'block'; 
    } 
    // Here you forward the coordinates e.pageX, e.pageY 
    // ... to whatever function that needs it 
}; 
</script>