javascript - 加载谷歌地图控件元素时的回调

Question

我发现其他堆栈溢出问题表明使用“空闲”事件是在谷歌地图完全加载时触发回调的方式。但就我而言，我想运行一些代码以将一些文本注入(inject) map UI 中的元素，但我发现在创建这些元素之前会触发“idle”。

明确地说，我将初始化函数附加到窗口的加载方法:

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

在初始化中，我创建了一些 UI 元素并将它们附加到 map 上:

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 中插入更多文本，因此我需要将它们放在那里。

我试过将其作为初始化方法的最后一行:

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

但是，emitText 有一行尝试获取 ElementById("cd")( map 上的 controlsDiv)，但我知道它是空的，因为 emitText 在 controlsDiv 实际完成加载之前已经触发。

那么，问题是如何检测 map 的完全加载，包括任何 UI div。我的测试表明，“空闲”事件在加载 UI 元素并在 DOM 中访问之前触发。提前致谢!

Answer 1

只需访问 controlsDiv 而不是 getElementById("cd")，div 是否已经添加到文档中并不重要。