Добавить маркер в изображение в javascript?

Question

Кто-нибудь знает, как я могу добавить маркер к изображению (а не карте) в Javascript?

В идеале я бы хотел, чтобы обработчик, который ведет себя так же, как добавление маркера к карте, то есть onclick вызывает отображение маркера в точке, на которую было нажата, и возвращает координаты пикселя x/y точки, которая была щелкнул.

Возможно ли это?

Приветствия Ричард

Answer 1

Да, это возможно.

Хотя это полностью выполнимо с помощью только javascript, я бы использовал какую-то библиотеку, например, JQuery.

Подход должен состоять в том, чтобы иметь img-элемент с вашим маркером, а затем добавить обработчик click к изображению, которое вы хотите использовать в качестве своей «карты», которое moves вашего маркера, к которому был щелкнут элемент.

Вот непроверенный пример:

<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: И это вполне возможно без JQuery, конечно, тоже. Ниже приведен пример кода.

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