目前我真的遇到了使用 Google Maps API V3 的一个非常奇怪的问题。
我在 iframe 中有一张 map ,它显示了很多标记,每个标记都有一些自定义信息框,这里是:
http://www.whist.ch/karte
我在 Mac 和 PC(Chrome、Firefox、IE)上测试过的所有浏览器都运行良好。然而,在 iPad 和 iPhone 上,标记会在放大得太近时消失,并在缩小时再次出现。
有人对此有解释或修复吗?
非常感谢,
阿敏。
附言。 iPad 上的 Google map 中也有一些丑陋的白线,也许有人也知道如何摆脱它们:)
最佳答案
经过大量紧张的调试,我想我找到了解决我的问题的方法(也许也是你的问题)。谷歌似乎也意识到了这个问题,这就是我找到解决方案的方式。我使用了一个很棒的调试器,叫做 weinre ( documentation ),它是基于 webkit 的浏览器的远程调试实用程序。
Google Maps API 使用 -webkit-transform: matrix(a,b,c,d,f);
CSS 属性来进行缩放和平移。这一切都非常漂亮,但 iPad 上基于 webkit 的浏览器似乎存在一个错误(我尝试了其他三种浏览器,而不仅仅是 Safari)。我注意到放置在 map 中的许多(如果不是大多数)div 元素用于 map 图 block 、叠加层、阴影等都应用了 -webkit-transform: translateZ(0px);
。我将该行添加到我的 img
和 div
元素并立即解决了我的问题。
我还没有尝试通过链接样式表添加样式,只能直接修改每个元素,但是你去吧;解决方案:
element.style.webkitTransform = "-webkit-transform: translateZ(0px);";
tl;dr 这是 iPad 错误...解决添加 -webkit-transform: translateZ(0px);
到任何消失的东西。
https://stackoverflow.com/questions/9229535/