javascript - 在javascript中向图像添加标记？

Question

有人知道如何在 Javascript 中向图像(而不是 map )添加标记吗？

理想情况下，我想要一个行为类似于向 map 添加标记的处理程序 - 即 onclick 导致在单击的点处显示标记，并返回单击的点的 x/y 像素坐标.

这可能吗？

干杯理查德

Answer 1

是的，这是可能的。

虽然仅使用 javascript 就完全可行，但我会使用某种库，例如 JQuery .

该方法是使用带有标记的 img 元素，然后添加 click -您想要用作“ map ”的图像的处理程序，其中 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>

<小时/>

编辑:当然，如果没有 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>