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和3.8(3.9 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. 异步加载脚本。查看地图 api 的基本入门页面并找到异步加载 API 部分： http: //goo.gl/m9OwJ

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