2016-10-26 123 views
-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的一部分。但運行我的代碼否則說。任何人都明白髮生了什麼問題?

+1

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

+0

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

+0

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

回答

0

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>

相關問題