Javascript 将标记添加到图像-从相对坐标转换回绝对坐标时出现问题

我正在尝试向图像添加标记。我认为将其转换为图像地图既没有用处也不实用

当用户单击图像时，它应该放置一个标记。我可以检索相对坐标，但是我无法放置标记，因为我无法获得我认为的绝对坐标

我正在尝试做一些与这个插件非常相似的事情：（点击底部的编辑，然后点击图片）

这是我的密码：

我也试过：

$('#AddSensors_img').click(function (e) {
    var rpos = [];
    rpos.x = e.pageX - this.offsetLeft;
    rpos.y = e.pageY - this.offsetTop;
    var marker = $('span').addClass('marker black').html("1");
    marker.css({
        left: rpos.x,
        top: rpos.y
    })
    marker.appendTo(this);

});

---

您可以创建一个包装器，该包装器将具有

位置：相对

，图像将具有

位置：绝对

（与标记相同），然后您可以使用偏移量获取相对值，并使用偏移量放置标记

html:

javascript:

var $wrapper = $('#wrapper');
$('#wrapper img').click(function(e) {
    var $this = $(this);
    var offset = $this.offset();
    $('<span>1</span>').addClass('marker').css({
        left: e.pageX-offset.left,
        top: e.pageY-offset.top
    }).appendTo($wrapper);
});

var$wrapper=$（'#wrapper'）；
$（“#包装器img”）。单击（函数（e）{
var$this=$（this）；
var offset=$this.offset（）；
$（'1'）.addClass（'marker'）.css({
左：e.pageX-offset.left，
顶部：e.pageY-offset.top
}).appendTo（$wrapper）；
});

我也做过类似的事情。如果无法获取相对于文档的坐标。只需获取图像父容器的起点。然后，若你们有图像的高度和宽度，你们可以根据父容器的偏移量，将你们的标记放在任何你们想放在上面的地方。谢谢！只是一个简单的问题：为什么它只在第二次点击时得到正确的位置？@Cornwell因为第一次点击时标记不存在，所以宽度和高度为空。

<div id="wrapper">
   <img src="some_image.png"/>
</div>

#wrapper { position: relative; }
#wrapper img, #wrapper .marker { position: absolute; }
#wrapper .marker { z-index: 100; }
#wrapper img { top: 0; left: 0; }

var $wrapper = $('#wrapper');
$('#wrapper img').click(function(e) {
    var $this = $(this);
    var offset = $this.offset();
    $('<span>1</span>').addClass('marker').css({
        left: e.pageX-offset.left,
        top: e.pageY-offset.top
    }).appendTo($wrapper);
});