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

Question

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

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

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

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

Answer 1

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

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

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

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

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