Google Maps API版本3导致图像模糊/模糊

Question

出于某种原因，在Safari 5.1.5上，谷歌地图模糊了我的一些图像。以http://catpr.com/craig-chapman/为例 - 当它加载枝形吊灯时，会松散地渲染片刻，然后模糊不清。

删除

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false">   </script>

从我的代码

停止发生这种情况。它似乎只影响Safari - 这在Firefox或Chrome中不会发生。我还没有测试任何旧版本的Safari，所以它可能是一个bug？我还尝试清除缓存，重新启动计算机+更新Safari，无需更改。

有什么想法吗？

由于

Answer 1

我也有这个问题，地图本身和页面上的字体。经过很长一段时间试图解决这个问题，这是我的结论：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.5&sensor=false"></script>

第一个（与你的相同）给了我模糊的地图。如果我发表评论并强制推出版本3.5，地图就会变得清晰而快乐！

我的Google Maps API在我的网站字体中更改了抗锯齿也遇到了问题。我设法在我的主style.css上修复此问题：

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
}

我希望这可以帮助您或某人。 注意：我正在使用twitter bootstrap框架。

Answer 2

现在我发现这个问题与Chrome（23 beta）上3.8和3.9 API的区别。如果我指定3.9 API，它会在一瞬间正确显示地图，然后使一切模糊。如果我指定3.8 API，它就可以正常工作。

你可以在这里看到问题：

问题出在http://melbourne.origami.org.au;我目前将3.8 API设置为一种解决方法，但是当v10最终发布时，它可能会迫使3.9成为最低的可用API。

从我自己的讨论中，3.9和3.10似乎调用Chrome（并通过扩展Safari我想象）使用GL合成渲染所有内容，因为它添加-webkit-transform：translateZ（0）;到所有地图元素。这似乎是事情看起来很可怕的原因。

Answer 3

我无法重现Safari中的错误。但是，有两种可能的解决方法：

1. 异步加载脚本。查看maps api的基本“入门”页面，找到异步加载API部分：http://goo.gl/m9OwJ

2. 请尝试使用Google静态地图图片，而不会只将JavaScript加载到地图图像中。 http://goo.gl/wY8lF。我建议您，因为您似乎没有使用Google Maps API的动态功能。