Fügen Sie eine Markierung auf ein Bild in Javascript?

Question

Wer weiß, wie ich einen Marker zu einem Bild hinzufügen kann (keine Karte) in Javascript?

Im Idealfall würde ich einen Handler wie das wie das Hinzufügen einer Markierung auf einer Karte viel verhält - also Onclick verursacht eine Markierung an der Stelle angezeigt werden, die angeklickt wurde, und gibt die x / y Pixelkoordinaten des Punktes, auf den geklickt wurde .

Ist das möglich?

Prost Richard

Answer 1

Ja, es ist möglich.

Auch wenn es nur mit Javascript völlig machbar ist, würde ich eine Art von Bibliothek verwenden wie JQuery .

Der Ansatz wäre ein img-Element mit dem Marker zu haben, und dann einem klicken Sie auf -Handler auf das Bild, das Sie als „Karte“ verwenden möchten, die bewegt Ihre Markierung auf dem das Element geklickt wurde.

Hier ist ein nicht getestet Beispiel:

<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: Und das ist durchaus möglich, ohne JQuery natürlich auch. Unten ist ein Codebeispiel aus, dass nur.

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