¿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 tener un controlador que se comporte como agregar un marcador a un mapa, es decir, un clic hace que se muestre un marcador en el punto donde se hizo clic y devuelve las coordenadas x/y del punto clickeado

¿Esto es 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 img-elemento con su marcador, y luego agregar un identificador click a la imagen que desea utilizar como su "mapa", que moves marca el lugar donde se hizo clic.

Aquí es 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 ejemplo de código 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>