我正在使用 MarkerWithLabel(顺便说一句,这是一个很棒的小工具)在地图上标记了几十个位置 - 在本例中约为 300 个。
所以我遍历我的数据元素并在循环的每次迭代中创建一个像这样的标签
int i = 1;
for(b in data){
var figureLabel = document.createElement("FIGURE");
var pictureLabel = document.createElement("img");
pictureLabel.src = "Assets/my_icon.png";
var caption = document.createElement("FIGCAPTION");
var text = document.createTextNode(i);
caption.appendChild(text);
figureLabel.appendChild(pictureLabel);
figureLabel.appendChild(caption);
markers[i] = new MarkerWithLabel({
position : new google.maps.LatLng(data[b].latitude, data[b].longitude),
map : map,
labelContent : figureLabel,
labelClass : "labels",
labelAnchor : new google.maps.Point(33.5, 56)
});
i++;
}
console.log('Map is populated!');
我在这里写一个问题,所以我们不要太兴奋,有问题。一旦所有这些人都加载到地图上,我需要将一个click
事件绑定到每个标记。假设它看起来像这样:
$('figure').click(function(){
console.log($(this).find('figcaption').text());
});
它应该像允许for:in
循环完成一样简单,但是在循环完成和标签放置之间有一个非常明显的滞后。日志“地图已填充!”发生在标记出现之前的几百毫秒,实际上,如果我在循环完成后立即绑定我的事件,它将无法找到要绑定的任何内容,并且我没有获得所需的功能.
因此,我尝试将侦听器附加到我的地图对象,如下所示:
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
//Bind some click events
});
这实际上有时有效,但完全不可靠。我也尝试过其他听众boundschanged
,idle
但这些也不可靠。
所以我需要一些方法来识别我的控制流中标记及其各自的 DOM 元素实际附加到地图的点,而不仅仅是在包含它们的实例化的循环完成时。