Google Maps API（JS）InfoWindow問題顯示圖像（html <img>標籤）

-2

我正在製作一個帶有Google Maps API（JavaScript）的小型網絡應用程序，在我的應用程序中我有一個用於循環位置（緯度和經度）的其他一些信息。進入對我有這樣的代碼：Google Maps API（JS）InfoWindow問題顯示圖像（html <img>標籤）

for (i = 0; i < locations.length; i++) { 
    var coords = new google.maps.LatLng(Number(locations[i][1]), Number(locations[i][2])) 
    marker = new google.maps.Marker({ 
     position: coords, 
     map: map 
    }); 

    var iwcontent="<a href='app.php?id="+locations[i][3]+"' target='_blank'><h4><img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'> "+locations[i][0]+"</h4></a>"; 
    console.log(iwcontent); 
    bounds.extend(coords); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(iwcontent); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    }

在控制檯我收到正確的HTML結構（恕我直言），像這樣：

<a href='app.php?id=ABCD-J2WZSW' target='_blank'><h4><img='images/icons/ABCD-J2WZSW/logo.jpg' class='minilogo'> ABCD, 33.</h4></a>

in4b：的文件images/icons/ABCD-J2WZSW/logo.jpg存在，並且.minilogo類具有固定（可見）width css值。

問題是：我沒有看到任何圖像！

有趣：如果我「考察」信息窗口，我可以看到以下內容：

<a href="app.php?id=ABCD-J2WZSW" target="_blank"><h4><img='images icons="" abcd-j2wzsw="" logo.jpg'="" class="minilogo"> ABCD, 33.</img='images></h4></a>

請注意：

標籤是完全搞砸了！
在標籤中，id值是小寫。

爲什麼會發生這種情況？我該如何解決它？感謝您的閱讀，請原諒我的英文不好！

來源

2017-04-16 candlejack

提供你的代碼工作的小提琴？ –

複製所有的代碼是複雜的...我已經解釋了問題和代碼（也有DOM檢查）。 – candlejack

所有標記都設置良好，infowindows顯示文本但不顯示圖像。出於某種奇怪的原因，''以這種方式呈現：' ABCD，33。' – candlejack

您在創建img標記時遇到問題。在你的代碼中，你不能分配一個url值到img，它的分配給src屬性。這是您的img標記代碼格式錯誤 - <img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'>，並且由於沒有src屬性，整個HTML結構正在變得混亂。

它應該是 -

<img src='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'>

這應該把你的問題的關心！

來源

2017-04-16 17:30:59

哈哈，omg，傻我。我想我需要休息一下。 – candlejack

@candlejack有時我們都會犯愚蠢的錯誤:) –

Google Maps API（JS）InfoWindow問題顯示圖像（html <img>標籤）

回答

相關問題