Ajouter un marqueur à une image en javascript?

Question

Quelqu'un sait comment ajouter un marqueur à une image (pas une carte) en Javascript?

Idéalement, j'aimerais un gestionnaire qui se comporte comme si vous ajoutiez un marqueur à une carte - c.-à-d. avec onclick, un marqueur s'affichera au point sur lequel vous avez cliqué et renvoie les coordonnées en pixels x / y du point sur lequel vous avez cliqué. .

Est-ce possible?

A bientôt Richard

Answer 1

Oui, c'est possible.

Bien que ce soit totalement faisable avec du javascript, j'utiliserais une sorte de bibliothèque telle que JQuery .

L’approche consisterait à créer un élément img avec votre marqueur, puis à ajouter un cliquez sur -handler à l'image que vous voulez utiliser comme "carte". qui déplace 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>

Modifier: Et cela est tout à fait possible sans JQuery, 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>