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

Question

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

删除

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

我的代码阻止了这种情况的发生。它似乎只影响 Safari - 这在 Firefox 或 Chrome 中不会发生。我没有测试任何旧版本的 Safari，所以它可能是一个错误？我也试过清除缓存、重启电脑+更新 Safari，没有任何变化。

有什么想法吗？

谢谢

Answer 1

这个问题现在发生在我身上，因为 Chrome 上的 3.8 和 3.9 API（23 beta）之间存在差异。如果我指定 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 2

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

<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 引导框架。

Answer 3

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

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

2. 尝试改用 Google 静态地图图像，它不会仅加载地图图像的 JavaScript。 http://goo.gl/wY8lF。我建议您这样做，因为您似乎没有使用 Google Maps API 的动态功能。