在JavaScript中给图像添加标记？

Question

在JavaScript中给图像添加标记？

javascriptimageeventsonclickmarker

11

有人知道如何在JavaScript中向图像（而不是地图）添加标记吗？

理想情况下，我希望有一个类似于在地图上添加标记的处理程序 - 即单击会在单击点处显示一个标记，并返回单击点的x/y像素坐标。

这个可能吗？

谢谢
Richard

- Richard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Nycander · Accepted Answer

是的，这是可能的。

虽然只使用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>

编辑： 当然，这也完全可以不用 JQuery。以下是一个无需使用 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>