google-maps - 谷歌地图标记仅在 iPhone/iPad 上在特定缩放级别消失

Question

目前我真的遇到了使用 Google Maps API V3 的一个非常奇怪的问题。

我在 iframe 中有一张 map ，它显示了很多标记，每个标记都有一些自定义信息框，这里是:

http://www.whist.ch/karte

我在 Mac 和 PC(Chrome、Firefox、IE)上测试过的所有浏览器都运行良好。然而，在 iPad 和 iPhone 上，标记会在放大得太近时消失，并在缩小时再次出现。

有人对此有解释或修复吗？

非常感谢，

阿敏。

附言。 iPad 上的 Google map 中也有一些丑陋的白线，也许有人也知道如何摆脱它们:)

Answer 1

经过大量紧张的调试，我想我找到了解决我的问题的方法(也许也是你的问题)。谷歌似乎也意识到了这个问题，这就是我找到解决方案的方式。我使用了一个很棒的调试器，叫做 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); 到任何消失的东西。