Javascript在图像上放置标记onclick

Question

我有这张地图，当您点击地图时，它会将坐标放入输入字段。在地图上放置一个标记来显示点击的位置会很棒。

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

感谢所有帮助！

Answer 1

扩展在 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