在 javascript 中向 div 元素添加标记

发布于 2024-12-22 15:03:56 字数 173 浏览 4 评论 0原文

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

我希望能够将这些标记添加到已经用 javascript 绘制地图的 div 元素 (

) 中。

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

I need a marker that behaves much like adding a marker to a map. On double click cause a marker to be displayed at the point that was clicked, and returns the x/y pixel coordinates of the point that was clicked.

I want to be able to add those markers into div element (<div id="paper"></div>) that has got map drawn in javascript already.

Any help here is much appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

染火枫林 2024-12-29 15:03:56
$("#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);

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

});
惟欲睡 2024-12-29 15:03:56

jquery.com 上有一个教程专门针对这个问题。

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

There's a tutorial on jquery.com for exactly that question.

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

離殇 2024-12-29 15:03:56

在伪代码中

$("#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})
})

In pseudocode

$("#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})
})
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文