爲什麼我的Javascript代碼不能訪問google.maps.InfoWindow中的div？

-1

我正在使用Google Maps JavaScript API。我將InfoWindow的內容設置爲div。然後我嘗試使用document.getElementById（）來獲取InfoWindow中的div元素。爲什麼我的Javascript代碼不能訪問google.maps.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的一部分。但運行我的代碼否則說。任何人都明白髮生了什麼問題？

來源

2016-10-26 vfs23

因爲它是在一個不同的幀中。另外，瞭解同源策略。 – SLaks

看看[this]（https://developers.google.com/maps/documentation/javascript/reference#InfoWindow）頁面，也許domready事件可以幫助你。 –

我不相信地圖是在不同的框架中。我沒有包含設置地圖的代碼，但整個地圖都包含在我的頁面上的div中，就像Google Maps JavaScript API指示我做的那樣。此外，如果它在不同的框架中，爲什麼我第一次沒有調用getElementById（'content'）時會成功？ – vfs23

infowindow內容異步添加到DOM。直到它進入DOM後才能使用.getElementById。爲了檢測時，它已經被添加到DOM使用的信息窗口的domready事件：

domready中參數：無

當包含信息窗口的內容附加到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>

來源

2016-10-26 19:10:59 geocodezip

爲什麼我的Javascript代碼不能訪問google.maps.InfoWindow中的div？

回答

相關問題