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'));

InfoWindow按照我的预期显示在地图的中心。但是，我的代码的最后一行将'null'记录到控制台。如果我在此代码完成后在不同的函数中执行相同的代码行，则从getElementById（'content'）返回一个元素，并将有关该元素的信息记录到控制台。我不明白这里发生了什么。我认为在创建InfoWindow的代码行之后立即在地图上打开它，'content'div是DOM的一部分。但运行我的代码说不然。任何人都明白出了什么问题？

Answer 1

infowindow内容以异步方式添加到DOM。在它位于DOM之后才能使用.getElementById。要检测何时将其添加到DOM，请使用infowindow上的domready事件：

domready 参数：无

当包含InfoWindow的内容附加到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'));
});

proof of concept fiddle

代码段

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"></script>
<div id="map_canvas"></div>

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

1 个答案: