Question

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

唯一的事情就是我找到的例子会在你重新点击它时留下地图上的所有点，而我只需要点击图像上最后一个位置的标记。有人可以帮忙吗？它就像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

Answer 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>

Javascript地方标记图像onclick

2 个答案: