在javascript中将标记添加到div元素答案

【问题标题】：Add markers to a div element in javascript在javascript中将标记添加到div元素
【发布时间】：2012-01-26 03:46:27
【问题描述】：

我需要一个行为类似于向地图添加标记的标记。双击时会在被点击的点上显示一个标记，并返回被点击点的 x/y 像素坐标。

我希望能够将这些标记添加到已经用 javascript 绘制地图的 div 元素 (<div id="paper"></div>) 中。

非常感谢这里的任何帮助！

【问题讨论】：

不，我没有使用。我的地图不完全是土地地图。

标签： javascript jquery html double-click marker

【解决方案1】：

$("#paper").dblclick(function(e) {
    var relativeX = e.pageX - this.offsetLeft;
    var relativeY = e.pageY - this.offsetTop;
    var marker = $('<img>').addClass('marker'); //your marker class
    marker.css({
        left: relativeX,
        top: relativeY
    })
    marker.appendTo(this);

});

【讨论】：

【解决方案2】：

在伪代码中

$("#paper").dblclick(function(e) {
    x, y = calculate mouse position from e.pageX/Y and $(this).offset
    marker = $(marker html code).appendTo(this)
    marker.css({ left: x, top: y})
})

【讨论】：

其中元素标记有CSS位置：绝对，如果你计算相对于页面的x和y；或者标记和 div#paper 都有位置：relative，如果你计算 x 和 y 相对于 #paper 的左上角。

【解决方案3】：

jquery.com 上有一个针对该问题的教程。

http://docs.jquery.com/Tutorials:Mouse_Position

【讨论】：