Google Maps Api v3-图例重复 [英] Google Maps Api v3 - Legend Duplication
问题描述
我在Klipfolio中嵌入了Google地图， 但是，当您刷新页面时，图例的项目会不时地进行自我复制. 复制了图例的屏幕截图和
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
主体包括地图画布和图例的2个标签
the body includes the 2 tags for the map canvas and the legend
<div id="map_canvas"></div>
<div id="legend"></div>
这就是我按照脚本中的google maps api文档填充图例的方式.
and this is how i populate the legend as per google maps api documentation in the script.
// 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.
我想知道这是否可能是由于与klipfolio的某些兼容性所致.有人遇到过这个问题吗? 我做错什么了吗?或者我怎么能确定是由于兼容性问题? 同时，当这些重复出现时，我没有收到任何警告或错误.
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.
推荐答案
对于其他将遇到此错误的人，我通过变通办法解决了这一问题.只需使用其css类删除重复其自身的值即可.可以在此处找到一个示例.
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.
<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从主体加载时进行重复制作的评论.
Refer to the previous comments I made about js making duplicates when it is being loaded from the body.
这篇关于Google Maps Api v3-图例重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
