Google Maps Api v3 - 图例重复

I have embed a google maps in Klipfolio, however the legend's items are duplicating themselves from time to time when you refresh the page. screenshot of the legend duplicated and codes

我在Klipfolio中嵌入了谷歌地图，但是当您刷新页面时，图例的项目会不时地重复。图例重复的截图和代码

the body includes the 2 tags for the map canvas and the legend

正文包含地图画布和图例的2个标记

    <div id="map_canvas"></div>
    <div id="legend"></div>

and this is how i populate the legend as per google maps api documentation in the script.

这就是我按照脚本中的google maps api文档填充图例的方式。

// setting the legend
var iconBase = 'https://i.imgur.com/';
var icons = {
    mine_site: {
       name: 'Mine Site',
       icon: iconBase + 'JCSVR5C.png'
    },
    mine_depot: {
       name: 'Mine Depot',
       icon: iconBase + 'XkWP909.png'
    },
    warehouse: {
       name: 'Exporter Warehouse',
       icon: iconBase + 'W7u6wR3.png'
   }
};

var legend = document.getElementById('legend');
for (var key in icons) {
   var type = icons[key];
   var name = type.name;
   var icon = type.icon;
   var div = document.createElement('div');
   div.innerHTML = '<img src="' + icon + '"> ' + name;
   legend.appendChild(div);
}

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

I even used a counter to append to the legend only for a number of times equal to the length of the legend items, but to no avail.

我甚至使用一个计数器来附加到图例只有很多次等于图例项目的长度，但无济于事。

I am wondering if it might not be due to some compatibility with klipfolio. Has anyone met this issue? Is there something I am doing wrong? Or how can I be sure that it is because of the compatibility issue? Meanwhile, I do not get any warning or errors when those duplicates occur.

我想知道它是否可能不是由于与klipfolio的一些兼容性。有人遇到过这个问题吗？有什么我做错了吗？或者我怎么能确定它是由于兼容性问题？同时，当这些重复发生时，我不会收到任何警告或错误。

1 个解决方案

#1

For whoever else that will meet this error, I solved this by a work-around. Just remove values that repeat themselves by using their css class. An example can be found here.

对于那些会遇到这个错误的人，我通过解决方法解决了这个问题。只需删除使用css类重复自身的值即可。这里有一个例子。

<html>
<div class = "test">Window</div>
<div class = "test">Table</div>
<div class = "test">Chaise</div>
<div class = "test">Window</div>
<div class = "test">Chaise</div>
</html>
<script>
$('.test').each(function () {
  $('.test:contains("' + $(this).text() + '"):gt(0)').remove();  
});
</script>

Refer to the previous comments I made about js making duplicates when it is being loaded from the body.

请参阅我之前关于js从正文加载时制作重复项的评论。

#1