Question

我正在使用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元素实际附加到地图上的点，而不仅仅是当包含其实例化的循环完成时。

Answer 1

您应该尝试使用do..end将侦听器直接附加到标记对象。 See here用于添加和删除标记的侦听器的直接示例（以及更多）。

为了不单独依赖链接，那里的相关示例包括添加和（一种方法）删除侦听器

google.maps.event.addListener()

当然，您已经在示例代码中使用了此函数，而不是将其应用于标记本身。

MarkerWithLabel文档还包含lots of examples，包括处理事件的文档，您可能错过了。

需要等待MarkerWithLabel完成填充地图

1 个答案: