Javascript 在图像 onclick 上放置标记

Question

我有这张 map ，它会在您单击 map 时将坐标放入输入字段。如果能在 map 上放置一个标记以显示点击的位置，那就太好了。

唯一的问题是，当您重新单击时，我找到的示例会保留 map 上的所有点，而我只需要在最后单击图像的位置上做一个标记。 任何人都可以帮忙吗？ 就像this或 this例子。第一个很好，但会将标记图像放在图像本身下方，第二个会将所有点留在图像上。

感谢所有帮助!

Answer 1

在 Add a marker to an image in javascript? 上扩展已接受的解决方案

我刚刚向附加的 div 添加了一个独特的类，然后在每次点击事件中删除了所有具有该类的元素。

修改后的代码:

$(document).ready(function(){ 
    $(document).click(function (ev) {
        if($('div').length < 3) {
            $(".marker").remove();      // remove all existing markers
            $("body").append(            
                $('<div class="marker"></div>').css({       // include a class
                    position: 'absolute',
                    top: ev.pageY + 'px',
                    left: ev.pageX + 'px',
                    width: '10px',
                    height: '10px',
                    background: '#000000'
                })              
            );
        }
    });

});

查看操作:JSFIDDLE

根据评论要求更新:FIDDLE