Google地图标记仅在iPhone / iPad上以特定缩放级别消失

时间:2012-02-10 14:44:54

标签: google-maps google-maps-api-3 google-maps-markers

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

我在iframe中有一个地图,其中显示了很多标记,每个点击都有一些自定义信息框,在这里:

http://www.whist.ch/karte

我在Mac和PC(Chrome,Firefox,IE)上测试过的所有浏览器都能正常运行。然而,在iPad和iPhone上,当放大太近时标记消失,在缩小时再次出现。

有没有人对此有解释或解决方法?

非常感谢,

阿明。

PS。在iPad上的Google地图中也有一些丑陋的白线,也许有人知道如何摆脱这些:)

3 个答案:

答案 0 :(得分:6)

经过大量的紧张调试后,我想我找到了解决问题的方法(也许是你的问题)。谷歌似乎也意识到了这个问题,这就是我找到解决方案的方法。我使用了一个名为weinredocumentation)的超棒调试器,它是基于webkit的浏览器的远程调试工具。

Google Maps API使用-webkit-transform: matrix(a,b,c,d,f); CSS属性进行缩放和平移。这一切都非常漂亮,但似乎iPad上基于webkit的浏览器存在一个错误(我尝试了其他三种浏览器,而不仅仅是Safari)。我注意到地图图块,叠加层,阴影等放置在地图中的许多(如果不是大多数)div元素都已应用-webkit-transform: translateZ(0px);。我已将该行添加到我的imgdiv元素中,并立即解决了我的问题。

我没有尝试通过链接样式表添加样式,只是直接修改每个元素,但是你去了;解决方案:

element.style.webkitTransform = "-webkit-transform: translateZ(0px);";

tl;博士的iPad错误...解决添加 -webkit-transform: translateZ(0px); 消失的事情。

答案 1 :(得分:1)

我能够确认-webkit-transform:translateZ(0px)reset可以解决问题。不过,我认为这是Google的InfoBox插件的一个问题。

我的修补程序按如下方式更新InfoBox脚本(v1.1.11):

在InfoBox.prototype.setBoxStyle_:

// Apply style values defined in the boxStyle parameter:
boxStyle = this.boxStyle_;
for (i in boxStyle) {
  if (boxStyle.hasOwnProperty(i)) {
    this.div_.style[i] = boxStyle[i];
  }
}
//Fix for iOS dissappearing InfoBox
if (typeof this.div_.style.webkitTransform === 'undefined') this.div_.style.webkitTransform = 'translateZ(0px)';

// Fix up opacity style for benefit of MSIE:

答案 2 :(得分:0)

我在Chrome Version 51.0.2704.84遇到了同样的问题。当我使用不同的标记类型并获得最大缩放时,标记消失了。

这个解决方案帮助了我:

-webkit-transform: translateZ(0px);