google maps信息窗口缺少图像/角

问题描述

| 我的Google Maps实例中的信息窗口看起来很有趣： 组成信息窗口图形角落和末端的某些图像似乎丢失了。知道为什么会这样吗？我正在尝试，但尚未弄清楚。 我正在使用gmap3，这是Google V3 API的JQuery包装器。这是我用于设置地图的代码（javascript / haml）：

  <script>


$(window).load(function() {
  $(\'#map\').gmap3();
  var bounds = new google.maps.LatLngBounds ();
  [email protected] do |area|
    bounds.extend(new google.maps.LatLng(#{area.latitude},#{area.longitude}));
    $(\'#map\').gmap3(
    {
    action:\'addMarker\',latLng:[#{area.latitude},#{area.longitude}],events:{click:function(marker,event){
    $(this).gmap3({action:\'clear\',list:[\'infoWindow\']});
    $(this).gmap3(
    {
    action:\'addInfoWindow\',latLng:marker.getPosition(),infowindow:
    {content:\"#{escape_javascript(link_to area.name,area)}<br>#{escape_javascript(image_tag area.image_holder.image.url(:thumb)) if area.image_holder.present?}\"}
    }
    )}}
    }
    );
  $(\'#map\').gmap3(\'get\').fitBounds(bounds);
  $(\'.clickable_row\').click(function() {
  var id = $(this).attr(\'id\');
  window.location = \'#{areas_path}\' + \'/\' + id;
  });
  });
  </script>

    

解决方法

我已经看到这是由最大宽度规则覆盖了地图所引起的。尝试设置以下内容：

#map img { max-width: none; } 

    ,我认为这与您的连接带宽低有关。我认为角落的图像正在超时。是否每次都发生这种情况？您的连接是否有问题？尝试使用萤火虫查看网络流量并找出图像请求以及它们是否超时。     ,我不知道是什么原因导致了这个问题，但是不再发生。那时我仍然很熟悉将javascript和google maps集成到我的rails应用程序中，所以也许我搞砸了一些设置或js包含。谁知道。 把它加到我的笨拙上。     ,有同样的问题 只需将以下代码放入您的css文件中即可：

img[src*=\"gstatic.com/\"],img[src*=\"googleapis.com/\"]  {
max-width: 99999px;

}