Google 地图 API (JS) 显示图像的信息窗口问题（html <img> 标签）

Question

我正在制作一个带有 Google 地图 API (JavaScript) 的小型网络应用程序，在我的应用程序中我有一个 for 循环遍历位置（纬度和经度）和一些其他信息...进入我有这个代码：

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 class 有一个固定的（可见的）width css值。

problem/issue是：我没有看到任何图像！

有趣： 如果我 "inspect" 信息窗口，我可以看到以下内容：

<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 值是小写的。

为什么会这样？我该如何解决？感谢阅读，请原谅我的英语不好！

Answer 1

您在创建 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'>

这应该可以解决您的问题！

Google 地图 API (JS) 显示图像的信息窗口问题（html <img> 标签）

Google Maps API (JS) InfoWindow issue showing up images (html <img> tags)

html

javascript

jquery

infowindow

google-maps-api-3