Добавить маркер к изображению в JavaScript?
-
06-07-2019 - |
Вопрос
Кто-нибудь знает, как я могу добавить маркер к изображению (а не к карте) в Javascript?
В идеале мне нужен обработчик, который ведет себя так же, как добавление маркера на карту, т.е.onclick вызывает отображение маркера в точке, по которой был сделан щелчок, и возвращает пиксельные координаты x/y точки, по которой был сделан щелчок.
Это возможно?
Ура Ричард
Решение
Да, это возможно.
Хотя это вполне осуществимо с помощью только JavaScript, я бы использовал какую-нибудь библиотеку, например JQuery.
Подход заключался бы в том, чтобы иметь img-элемент с вашим маркером, а затем добавить щелкнуть-обработчик изображения, которое вы хотите использовать в качестве «карты», которая движется ваш маркер туда, где был нажат элемент.
Вот непроверенный пример:
<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>
Редактировать:И это, конечно, вполне возможно и без 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>