Javascript地方标记图像onclick [英] Javascript place marker on image onclick

问题描述

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

I have this map that will place coordinates into inputfields when you click on the map. It would be great to have a marker to place on the map that will show where was clicked.

唯一的事情就是我找到的例子会在你重新点击时留下地图上的所有点，而我只需要点击最后一个位置的标记在图像上。
任何可以提供帮助的人？
就像这个或这个示例。第一个是好的，但将标记图像放在图像本身下，第二个将留下图像上的所有点。

Only thing is that the examples I find will leave all of the points on the map when you re-click it, while I only need a marker on the last position clicked on the image. Anyone that can help with this? It is like this or this example. The first one is good but will place marker image under the image itself, and the second one will leave all of the dots on the image.

所有帮助表示赞赏！

推荐答案

在添加扩展已接受的解决方案javascript中图像的标记？

我只是在附加div中添加了一个唯一的类，然后在每次点击事件中删除了该类的所有元素。

I just added a unique class to the appending div and then removed all elements with that class on every click event.

修改后的代码：

$(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

Update as requested in comment: FIDDLE

这篇关于Javascript地方标记图像onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！