Fügen Sie Marker zum Bild hinzu - Schwierigkeiten beim Zurückkonvertieren von relativen in absolute Koordinaten

Question

Ich versuche, Marker zu einem Bild hinzuzufügen. Ich glaube nicht, dass es sinnvoll oder praktisch ist, es in eine Bildkarte umzuwandeln.

Wenn ein Benutzer auf das Bild klickt, sollte es einen Marker platzieren. Ich kann die relativen Koordinaten abrufen, aber dann kann ich den Marker nicht platzieren, weil ich die absoluten Koordinaten nicht bekommen kann, denke ich.

Ich versuche, etwas sehr Ähnliches wie dieses Plugin zu tun: http://waynegm.github.io/imgNotes/examples/basic_interactive.html (Klicken Sie unten auf Bearbeiten und dann auf das Bild)

Hier ist mein Code: 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"
            });
        }
    }
});

Habe auch das versucht:

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

});

Answer 1

Sie können einen Wrapper erstellen, der position: relative hat und Ihr Bild wird position: absolute haben (genauso wie Marker), dann können Sie Offset verwenden, um den relativen Wert zu erhalten und verwenden, um einen Marker zu platzieren.

html:

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();
    $('1').addClass('marker').css({
        left: e.pageX-offset.left,
        top: e.pageY-offset.top
    }).appendTo($wrapper);
});