Hinzufügen eines Markers zu einem Bild in Javascript?

Question

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

Idealerweise hätte ich gerne einen Handler, der sich ähnlich wie ein Marker zu einer Map verhält - dh onclick bewirkt, dass ein Marker an dem Punkt angezeigt wird, an dem geklickt wurde, und gibt die x/y-Pixelkoordinaten des Punktes zurück geklickt.

Ist das möglich?

Prost Richard

Answer 1

Ja, ist es möglich.

Obwohl es mit nur Javascript völlig machbar ist, würde ich eine Art von Bibliothek wie JQuery verwenden. Der Ansatz wäre, ein img-Element mit Ihrem Marker zu haben, und fügen Sie dann einen click -Handler zu dem Bild, das Sie als Ihre "Karte" verwenden möchten moves Ihre Marke an, wo das Element angeklickt 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 Code-Beispiel für genau das.

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