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>标签）

回答

相关问题