Question

我在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的一些兼容性。有没有人遇到过这个问题？有什么我做错了吗？或者我怎么能确定它是由于兼容性问题？同时，当这些重复发生时，我不会收到任何警告或错误。

Answer 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在从正文中加载时复制的评论。

Google Maps Api v3 - 图例重复

1 个答案: