当Google Maps控制元素加载完成时的回调函数

Question

我发现其他 Stack Overflow 的问题建议使用 'idle' 事件来触发回调函数，当谷歌地图完全加载时。但在我的情况下，我想运行一些代码将文本注入地图 UI 元素。但是我发现'空闲'事件在这些元素创建之前被触发。

明确一点，我将一个初始化函数附加到窗口的加载方法上：

google.maps.event.addDomListener(window, 'load', initialize);

在初始化函数中，我创建了一些UI元素并将它们附加到地图上：

function initialize() {
  map = new google.maps.Map(document.getElementById("map-div"), mapOptions);
  ...
  // set up the controls div 
  var controlsDiv = document.createElement('div');
  controlsDiv.id="cd";
  controlSetup(controlsDiv);
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlsDiv);
}

好的，但接下来我想要做的是在一切准备就绪后运行一个函数。在我的情况下，我需要将进一步的文本插入到控件div中，因此我需要这些控件存在。

我已经尝试把这个作为initialize方法的最后一行：

google.maps.events.addListenerOnce(map,'idle',emitText);

然而，emitText方法有一行代码尝试获取地图上的controlsDiv元素（id为“cd”），但我发现这个元素为空，因为emitText在controlsDiv实际完成加载之前就已经被触发了。

那么问题是如何检测地图的完全加载，包括任何UI元素。我的测试表明，“idle”事件在UI元素加载和DOM中可访问之前就已经被触发。提前感谢您的帮助！

- JawguyChooser

---

我的临时解决方案只是在继续之前放置一个轮询存在的方法。因此，现在，在初始化的最后一行中，我调用initialEmitText而不是emitText。initialEmitText检查相关元素是否为空，并设置超时以保持检查它们是否为空，如果它们不为空，则调用emitText。我认为这不是非常优雅，但它有效。如果有人知道更好的解决方案，我会保持问题开放。 - JawguyChooser

你找到解决方案了吗？ - Ivan Doroshenko

哇，这已经是3年前的事了！我相当确定我最终只是采用了我在上面评论中描述的轮询解决方案。 - JawguyChooser

谢谢。这个解决方案仍然有效 :) - Ivan Doroshenko

Answer 1

只需访问controlsDiv，而不是getElementById("cd")，无论该div是否已添加到文档中。

- Dr.Molle

---

所以，如果controlsDiv是全局变量，那么这应该可以工作。但它不是，所以我需要一种从完全不同的方法访问此对象的方式。最终我采取了一些解决方法：我只需进行200毫秒的回调并循环直到getElementById不返回null，然后我就可以继续格式化其中的文本。 - JawguyChooser

谢谢，这对我有用。我之前尝试使用$("#<id>")获取元素，但是现在我通过$(controlsDiv).find("#<id>")找到了它。 - ZeroDotNet

Answer 2

当我想在元素内运行jQuery插件时，我遇到了同样的问题，因为它被添加到#map中。所以我通过回调谷歌地图完全加载来解决了这个问题：

google.maps.event.addListenerOnce(g, 'idle', () => {
        setTimeout(function() {
         //do smt
        }, 1)
    });

- Quan Tran