为什么我的 Javascript 代码不能访问 google.maps.InfoWindow 中的 div？

Question

我正在使用 Google Maps Javascript API。 我将 InfoWindow 的内容设置为 div。 然后我尝试使用 document.getElementById() 来获取 InfoWindow 中的 div 元素。

  var contentString = '<div id="content" style="width:200px;height:200px;"></div>';

  var infowindow = new google.maps.InfoWindow({
      position: map.getCenter(),
      content: contentString
    });

  infowindow.open(map);

  console.log(document.getElementById('content'));

正如我所料，信息窗口显示在地图的中心。 但是，此处代码的最后一行将“null”记录到控制台。 如果我在此代码完成后在不同的函数中执行同一行代码，则会从 getElementById('content') 返回一个元素，并将有关该元素的信息记录到控制台。 我不明白这里发生了什么。 我认为，在创建 InfoWindow 并在地图上打开它的代码行之后，“内容”div 是 DOM 的一部分。 但是运行我的代码则不然。 任何人都明白出了什么问题？

Answer 1

infowindow 内容被异步添加到 DOM。 在.getElementById进入 DOM 之前，它无法使用。 要检测它何时被添加到 DOM，请使用信息窗口上的domready事件：

domready参数：无

当包含 InfoWindow 内容的 DOM 附加到 DOM 时，将触发此事件。 如果您正在动态构建信息窗口内容，您可能希望监视此事件。

var contentString = '<div id="content" style="width:200px;height:200px;">14</div>';

var infowindow = new google.maps.InfoWindow({
  position: map.getCenter(),
  content: contentString
});

infowindow.open(map);
google.maps.event.addListener(infowindow, 'domready', function() {
    console.log(document.getElementById('content'));
});

概念证明小提琴

代码片段：

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var contentString = '<div id="content" style="width:200px;height:200px;">14</div>'; var infowindow = new google.maps.InfoWindow({ position: map.getCenter(), content: contentString }); infowindow.open(map); google.maps.event.addListener(infowindow, 'domready', function() { console.log(document.getElementById('content')); }); } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>