¿Agregar un marcador a una imagen en javascript?

Question

¿Alguien sabe cómo puedo agregar un marcador a una imagen (no un mapa) en Javascript?

Idealmente, me gustaría un controlador que se comportara de manera similar a agregar un marcador a un mapa, es decir, al hacer clic se muestra un marcador en el punto en el que se hizo clic y devuelve las coordenadas de píxel x / y del punto en el que se hizo clic .

¿Es esto posible?

Saludos Richard

Answer 1

Sí, es posible.

Aunque es totalmente factible con solo JavaScript, usaría algún tipo de biblioteca como JQuery .

El enfoque sería tener un elemento img con su marcador y luego agregar un haga clic -handler a la imagen que desea utilizar como su " mapa " que mueve su marcador al lugar donde se hizo clic en el elemento.

Aquí hay un ejemplo no probado:

<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>

---

Editar: Y esto es totalmente posible sin JQuery también, por supuesto. A continuación se muestra un código de ejemplo de eso.

<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>