【问题标题】:Google Maps API (JS) InfoWindow issue showing up images (html <img> tags)显示图像的 Google Maps API (JS) InfoWindow 问题(html <img> 标签)
【发布时间】:2017-09-12 09:04:37
【问题描述】:

我正在使用 Google Maps API (JavaScript) 制作一个小型 Web 应用程序,在我的应用程序中,我有一个 for 循环遍历位置(纬度和经度)和一些其他信息...进入 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 类具有固定(可见)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>

请注意:

  1. 标签完全搞砸了!
  2. 标签中的id值是小写的。

为什么会这样?我该如何解决? 感谢您的阅读,请原谅我糟糕的英语!

【问题讨论】:

  • 提供你的代码的工作小提琴?
  • 复制所有代码很复杂...我已经解释了问题和代码(也有 DOM 检查)。
  • 所有标记都设置好,信息窗口显示文本但不显示图像。出于某种奇怪的原因,&lt;img&gt; 以这种方式呈现:&lt;img='images icons="" abcd-j2wzsw="" logo.jpg'="" class="minilogo"&gt; ABCD, 33.&lt;/img='images&gt;
  • 如何重新产生问题?

标签: javascript jquery html google-maps-api-3 infowindow


【解决方案1】:

您在创建 img 标记时遇到问题。在您的代码中,您不能将 url 值分配给 img,它分配给 src 属性。这是您的img 标记代码格式错误-&lt;img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'&gt;,由于没有src 属性,整个HTML 结构变得混乱。

应该是-

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

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

【讨论】:

    猜你喜欢
    • 2023-04-11
    • 2014-09-29
    • 2011-05-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-17
    • 2019-05-14
    相关资源
    最近更新 更多