Google Maps Api v3 - 图例复制答案

【问题标题】：Google Maps Api v3 - Legend DuplicationGoogle Maps Api v3 - 图例复制
【发布时间】：2018-01-12 07:50:36
【问题描述】：

我在 Klipfolio 中嵌入了谷歌地图，但是，当您刷新页面时，图例的项目会不时复制自己。 screenshot of the legend duplicated 和 codes

正文包括地图画布和图例的 2 个标签

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

这就是我根据脚本中的 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);

我什至使用计数器将图例附加到图例的次数，但次数等于图例项的长度，但无济于事。

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

【问题讨论】：

请提供一个minimal reproducible example 来证明您的问题。 Fiddle containing the posted code (only one set of icons)
@geocodezip 感谢您的指示。我在jsfiddle 中给出了一个例子，但没有出现重复。我认为klipfolio 的环境在其中发挥了重要作用。
那你还没有提供一个完整的例子。这应该可以帮助您找到问题所在。但是，除非您可以提供 minimal reproducible example，否则很难提供帮助。
问题是我无法在 jsfiddle 中复制 klipfolio 的环境。
我遇到了一些链接question，answer，这表明它是由 js 代码 document.createElement() 引起的，当内容不在 data-role= 中时，它可能会重复内容“页”。不幸的是，它甚至在我这边也不起作用。

标签： javascript google-maps-api-3 duplicates domdocument klipfolio

【解决方案1】：

对于遇到此错误的其他人，我通过变通方法解决了这个问题。只需使用它们的 css 类删除重复的值。一个例子可以在here找到。

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

参考我之前做的关于js从body加载时重复的cmets。

【讨论】：