我的Google地图实例中的信息窗口看起来很有趣:
构成信息窗口图形角落和四肢的一些图像似乎缺失了。知道为什么会这样吗?我正在试验,但还没想出来。
我正在使用gmap3,一个用于谷歌V3 API的JQuery包装器。这是我设置地图的代码(javascript / haml):
<script>
$(window).load(function() {
$('#map').gmap3();
var bounds = new google.maps.LatLngBounds ();
-@areas.each 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>
答案 0 :(得分:11)
我看到这是由最大宽度规则覆盖地图引起的。尝试设置:
#map img { max-width: none; }
答案 1 :(得分:0)
我认为它与您的连接上的低带宽有关。我认为角落的图像是超时的。每次都会发生这种情况吗?您的连接有问题吗?尝试用firebug查看网络流量和发现图像请求以及它们是否超时。
答案 2 :(得分:0)
我不知道是什么导致了这个问题,但它不再发生了。我还是熟悉将javascript和google地图集成到我的rails应用程序中,所以也许我会搞砸一些设置或js包含。谁知道。
把它归咎于我的无聊。
答案 3 :(得分:0)
有同样的问题,
将此代码放入您的css文件中:
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: 99999px;
}