javascript - jQuery - 如何为图像添加标记

Question

我正在考虑如何为图像添加一些标记(我的意思是像谷歌地图中的东西 - 地点标记)。我有一张图片，如果用户点击这张图片，我想在用户点击的那个地方添加一些其他图片。例如，如果用户将点击图像中的 3 个地方，我想在这个地方添加 3 个我的图像...

我知道如何获取路线、用户点击的位置，但我不知道如何在这些地方添加我的图片...

是否需要 AJAX？

所以我想请你帮忙，我会针对每一个提示适当的。谢谢。

Answer 1

有几种方法可以做到这一点，例如，您可以简单地将图像设置为某个 div 的背景(也可以在该 div 上使用 position: relative;)，然后单击您可以创建/移动/显示其他图像，设置 position: absolute; 并使用 top 和 left 定位它。

示例 CSS:

#container {
    background: green;
    width: 1000px;
    height: 500px;
    position: relative;
}
#container img {
    position: absolute;   
}

示例 HTML:

<div id="container"></div>

示例 JS(使用 jQuery):

$(document).ready(function() {
    $("#container").click(function(e) {
        e.preventDefault();
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var img = $('<img>');
        img.css('top', y);
        img.css('left', x);
        img.attr('src', 'http://img34.imageshack.us/img34/3337/imglp.png');
        img.appendTo('#container');
    })
});

工作示例 http://jsfiddle.net/uKkRh/1/