Javascript位置标记在图像onclick上

Javascript place marker on image onclick

本文关键字：图像 onclick 位置 Javascript      更新时间：2023-09-26

我有这个地图，当您单击地图时，它将在输入字段中放置坐标。这将是伟大的有一个标记放置在地图上，将显示在哪里被点击。

唯一的事情是，我找到的例子将离开地图上的所有点，当你重新点击它，而我只需要一个标记在最后的位置点击图像。有人能帮忙吗?就像这个或者这个例子。第一个很好，但是会把标记图像放在图像本身的下面，第二个会把所有的点留在图像上。

感谢所有的帮助!

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

不是最好的方法，但却是我能想到的最简单的方法我能写的最短代码:

<!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>
相关文章：