使用javascript向图像添加标记（与其他帖子不同）

我知道有一篇文章的标题与此相似，但我并不想达到同样的目的。我正在努力实现类似于本网站所做的事情-

（向下滚动至“帮助英国通勤者获得更好的通勤”部分）

我从一个JSON api获取信息，该api为我提供了X和Y坐标以及一些文本，我想用一个圆圈（代表X和Y坐标）和一个气泡填充一个图像，并使用javascript在通勤者俱乐部网站上类似的文本

我找到了一个插件——我能够用标记和工具提示绘制图像，但不是我想要实现的

编辑

我已经使用上面的插件把标记放在我的图像上，使它们消失并随机重新出现。见下面的代码：

<script type="text/javascript">
;(function($) {
    $(document).ready(function() {
            var $img = $("#image").imgNotes({
                onShow: $.noop,
                onAdd: function() {
                        this.options.vAll = "bottom";
                        this.options.hAll = "middle";
                        var elem =     $(document.createElement('div')).addClass("mrkr").css({
                                                                        "background-color": "#9AB54D",
                                                                        height: "8px",
                                                                        width: "8px",
                                                                        "border-radius": "60px",
                                                                        "text-align": "center",
                                                                        color: "#fff"
                                                                    }).attr("title", "");
                        var self = this;
                        $(elem).tooltip({
                                content: function() {
                                            return $(elem).data("note");
                                        }
                        });
                        return elem;
                } 
    });
            $(".mrkr").tooltip().tooltip("open");
    $img.imgNotes("import", [   {x: "0.5", y:"0.5", note:"Text 1"}, 
                                {x: "0.322", y:"0.269", note: "Text 2"},
                                {x: "0.9", y:"0.6", note: "Text 3"},
                                {x: "0.1", y:"0.456", note: "Text 4"},
                                {x: "0.345", y:"0.987", note: "Text 5"},
                                {x: "0.824", y: "0.593", note: "Text 6"}]);

    var divs = $('.viewport').find('.mrkr'),
len = divs.length,
randomDiv,
speed = 2000;
var interval = setInterval(
            function() { 
                    randomDiv = Math.floor(Math.random()*len);
                    divs.removeClass('show');
                    divs.eq(randomDiv).addClass('show');                         
            } , speed);
  });
})(jQuery);
</script>

;（函数（$）{
$（文档）.ready（函数（）{
var$img=$（“#图像”）.imgNotes({
onShow:$.noop，
onAdd:function（）{
this.options.vAll=“底部”；
this.options.hAll=“middle”；
var elem=$（document.createElement（'div'））.addClass（“mrkr”）.css({
“背景色”：“9AB54D”，
高度：“8px”，
宽度：“8px”，
“边界半径”：“60px”，
“文本对齐”：“居中”，
颜色：“fff”
}).attr（“title”，”）；
var self=这个；
$（元素）。工具提示({
内容：函数（）{
返回元（elem）.数据（“注释”）；
}
});
返回元素；
} 
});
$（“.mrkr”）.tooltip（）.tooltip（“打开”）；
$img.imgNotes（“导入”[{x:“0.5”，y:“0.5”，注：“文本1”}，
{x:“0.322”，y:“0.269”，注：“文本2”}，
{x:“0.9”，y:“0.6”，注：“文本3”}，
{x:“0.1”，y:“0.456”，注：“文本4”}，
{x:“0.345”，y:“0.987”，注：“文本5”}，
{x:“0.824”，y:“0.593”，注：“文本6”}）；
var divs=$（'.viewport'）.find（'.mrkr'），
len=分段长度，
随机化司，
速度=2000；
var interval=setInterval(
函数（）{
randomDiv=Math.floor（Math.random（）*len）；
divs.removeClass（“show”）；
divs.eq（randomDiv.addClass（'show'）；
}，速度）；
});
})（jQuery）；

我想在给定的时间显示所有4个标记，当新标记出现时，旧标记中的一个会消失

Javascript并不是我最擅长的语言，因此我非常感谢您提供的所有帮助

---

谢谢

，这样您就可以通过数据列表迭代您在间隔收到的项目，并一次显示一个或两个PIN

---

在字符串中预先添加气泡（html和css），并在每次显示新的pin时将其传递给createElement，并从DOM中删除旧的气泡元素。

提供的示例是一个google地图，其中包含实现此类功能的广泛工具。您是否也在使用地图，或者这是一个用于覆盖具有交互功能的图像的通用查询？“不是我试图实现的”。。。那我们怎么知道有什么区别呢？这个问题太广泛了，不符合本网站的指导原则，因为它目前按照@Yoda的规定运行-我使用的是图像，我知道这个示例使用的是谷歌地图，但我想知道是否可以使用图像创建类似的内容。@charlietfl-抱歉，我认为我很清楚，我希望能够创建类似于通勤者俱乐部网站的东西。显示来自JSON api的信息。您将如何开始此操作，我的javascript非常初级