javascript - 在网页上的给定图像中创建一个点

Question

假设我在网页中显示了这张地图。让该页面的用户单击并在鼠标单击时生成类似于this的点的最佳方法是什么。我对 html 和 php 有一定的了解，对 javascript 的了解较少，但我可以做得很好。提前致谢。

Answer 1

首先你需要检测鼠标坐标：

 $('img').click(function (e) {
      var offset = $(this).offset();
      var xPos = e.clientX - offset.left;
      var yPos = e.clientY - offset.top;
  });

WherexPos和yPos是点击点的坐标。

然后你需要把你的点放在点击的位置：

$(document).ready(function () {
    $('img').click(function (e) {
        var offset = $(this).offset();
        var xPos = e.clientX - offset.left;
        var yPos = e.clientY - offset.top;

        $('.container').append('<span class="point"></span>');
        $('.point:last-child').css({
            'top': yPos,
            'left': xPos
        });
    });
});

看看这个小提琴：http: //jsfiddle.net/zur4ik/mcdvd/

Answer 2

也许你可以编辑这个脚本

http://www.chestysoft.com/imagefile/javascript/get-coordinates.asp