Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/EmptyTag/134.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 需要等待MarkerWithLabel完成填充地图_Javascript_Google Maps_Google Maps Api 3_Event Binding - Fatal编程技术网

Javascript 需要等待MarkerWithLabel完成填充地图

Javascript 需要等待MarkerWithLabel完成填充地图,javascript,google-maps,google-maps-api-3,event-binding,Javascript,Google Maps,Google Maps Api 3,Event Binding,我正在使用MarkerWithLabel(顺便说一下,这是一个很好的小工具)在地图上标记几十个位置——在这个例子中是300个 所以我循环遍历我的数据元素,在循环的每次迭代中,创建一个这样的标签 int i = 1; for(b in data){ var figureLabel = document.createElement("FIGURE"); var pictureLabel = document.createElement("img"); pictureLabel.src = "Ass

我正在使用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
循环完成一样简单,但是在循环完成和标签放置之间有一个非常明显的延迟。日志“映射已填充!”在标记出现之前几百毫秒发生,实际上,如果我在循环完成后立即绑定我的事件,它将找不到任何要绑定的对象,并且无法获得所需的功能

因此,我尝试将侦听器连接到我的map对象,如下所示:

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    //Bind some click events    
});
这有时确实有效,但完全不可靠。我也尝试过其他监听器,比如
boundschanged
idle
,但这些监听器也不可靠


因此,我需要某种方法来确定控制流中标记及其各自的DOM元素实际附加到映射中的点,而不仅仅是当包含它们的实例化的循环完成时。

您应该尝试使用
google.maps.event.addListener()
将侦听器直接附加到标记对象。有关向标记添加和删除侦听器的直接示例(及更多)

为了不单独依赖链接,这里的相关示例包括添加和(一种)删除侦听器

var listener1 = google.maps.event.addListener(marker, 'click', aFunction);
google.maps.event.removeListener(listener1);
当然,您已经在示例代码中使用了这个函数,只是没有应用到标记本身


MarkerWithLabel文档还包含一些您可能错过的文档,包括处理事件的文档。

请提供一个示例来说明这个问题。这需要一些修补,连接侦听器是相当不稳定的,因为我在数组中有我的标记,但我让它工作了。我以前尝试过使用它,但是我无法让它工作,因为我一直坚持用jQuery绑定事件的想法。谢谢它似乎被最后一个元素抓住了。也就是说,将单击绑定到标记[i]会导致所有标记单击都绑定到标记[final_element],即使每个标记[]都是一个单独的对象,如图所示。如果需要更多帮助,您应该显示更新的代码。