3

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

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

我正在尝试做一些与这个插件非常相似的事情：http ://waynegm.github.io/imgNotes/examples/basic_interactive.html （点击底部的编辑，然后点击图片）

这是我的代码：http: //jsfiddle.net/m3HXe/

$('#AddSensors_img').click(function (e) {
    var rpos = [];
    rpos.x = e.pageX - this.offsetLeft;
    rpos.y = e.pageY - this.offsetTop;

    if (rpos) {

        var el = $(document.createElement('span')).addClass("marker black").html("1");
        var pos = [];

        var offset = $(this).offset();
        pos.x = Math.round($(window).scrollLeft()-rpos.x);
        pos.y = Math.round($(window).scrollTop() -rpos.y);
         console.log(pos);

        if (pos) {
            $(el).css({
                left: (pos.x),
                top: (pos.y),
                position: "absolute"
            });
        }
    }
});

也试过这个：

$('#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);

});
4

1 回答 1

3

您可以创建一个包装器，该包装器将具有postion: relative并且您的图像将具有position: absolute（与标记相同），然后您可以使用偏移量来获取相对值并用于放置标记。

html:

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

CSS：

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

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);
});
于 2013-08-09T08:55:05.237 回答