如何解决google maps信息窗口缺少图像/角
| 我的Google Maps实例中的信息窗口看起来很有趣: 组成信息窗口图形角落和末端的某些图像似乎丢失了。知道为什么会这样吗?我正在尝试,但尚未弄清楚。 我正在使用gmap3,这是Google 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>
解决方法
我已经看到这是由最大宽度规则覆盖了地图所引起的。尝试设置以下内容:
#map img { max-width: none; }
,我认为这与您的连接带宽低有关。我认为角落的图像正在超时。是否每次都发生这种情况?您的连接是否有问题?尝试使用萤火虫查看网络流量并找出图像请求以及它们是否超时。
,我不知道是什么原因导致了这个问题,但是不再发生。那时我仍然很熟悉将javascript和google maps集成到我的rails应用程序中,所以也许我搞砸了一些设置或js包含。谁知道。
把它加到我的笨拙上。
,有同样的问题
只需将以下代码放入您的css文件中即可:
img[src*=\"gstatic.com/\"],img[src*=\"googleapis.com/\"] {
max-width: 99999px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。