為什么我的 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>