Aggiungi un marcatore a un'immagine in javascript?

Question

Qualcuno sa come posso aggiungere un marcatore a un'immagine (non una mappa) in Javascript?

Idealmente, vorrei un gestore che si comporta in modo molto simile all'aggiunta di un marcatore a una mappa: ad esempio, un clic provoca la visualizzazione di un marcatore nel punto in cui è stato fatto clic e restituisce le coordinate pixel x / y del punto su cui è stato fatto clic .

È possibile?

Saluti Richard

Answer 1

Sì, è possibile.

Anche se è totalmente fattibile solo con JavaScript, userei una specie di libreria come JQuery .

L'approccio sarebbe quello di avere un elemento img con il tuo marker, quindi aggiungere un click -handler per l'immagine che desideri utilizzare come mappa " " che sposta il tuo marker nel punto in cui è stato cliccato l'elemento.

Ecco un esempio non testato:

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

---

Modifica E questo è del tutto possibile anche senza JQuery, ovviamente. Di seguito è riportato un esempio di codice proprio di questo.

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