Javascript在图像onclick上放置标记答案

【问题标题】：Javascript place marker on image onclickJavascript在图像onclick上放置标记
【发布时间】：2018-04-17 13:09:33
【问题描述】：

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

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

感谢所有帮助！

【问题讨论】：

你懂的。现在要删除任何以前的，您可以设置一个类或 id 或其他任何内容并删除任何以前的，例如：jsfiddle.net/95vczfve/37
这正是我想要的。 Javascript当然不是我的专业领域，所以最好问问。非常感谢！ @A.Wolff
嗯，这是在正文中添加div，然后在 div 中设置点，但这不适用于实际图像？当我这样做时，我猜它会将它放在图像后面
那么这不是你要找的。您应该搜索“使用画布编辑图像”，但这受同源策略的约束。参见例如：stackoverflow.com/questions/32053687/… 但同样，您需要删除 previoud 标记

标签： javascript jquery

【解决方案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

【讨论】：

谢谢，但是就像我对另一个评论一样，这将附加正文并且对于实际的<img> 是不可能的？因为它正在向它添加一个div。我不确定@Fr0zenFyr
@dnsko 查看更新。我只是将图片标签放在<body></body> 中，并使用了几乎相同的javascript。
诀窍是将标记定位为absolute，将父容器定位为relative，这已经存在。如果这仍然不是您想要的，那么我可能没有清楚地理解您的要求。
是的，这正是我想要的，只是我无法让它为我工作。该页面充满了表单、按钮和地图图像。无论我在正文中单击什么位置，它都会显示方形标记，除非我单击图像（似乎它把它放在图像后面，在正文本身上）。 @Fr0zenFyr
你能检查一下这个fiddle。我只是使用你小提琴中的相关 HTML 在那里演示它。此外，您可以使用 javascript 中的 $("#pointer_div").on('click', function(event) { ... }) 来代替 HTML 中的 onclick="point_it(event)" 。

【解决方案2】：

不是最好的方法，但我能想到的最简单的方法我可以编写的最短代码：

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <style type='text/css'>
            div.divImgContainer { position:absolute; top:10px; left:10px; bottom:10px; right:10px;  border: 1px solid black; }
            div#divMark { position:absolute; top:-100px;  left:-100px; background-color:red; width:3px; height:3px;}
        </style>
        <script type='text/javascript'>
            function ShowMarker(event) {
                //console.log (event);
                console.log (event);
                var mark = document.getElementById('divMark');
                mark.style.top =  (event.clientY)+'px';
                mark.style.left = (event.clientX) +'px';
            }
        </script>
    </head>
    <body>
        <div class='divImgContainer' onclick='ShowMarker(event);'>
            <!-- set image as background to this div -->
        </div>
        <div id='divMark' ><!-- you can change the "x" to image of marker if needed --></div>
    </body>
</html>

【讨论】：