Question

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

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

http://www.whist.ch/karte

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

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

非常感谢，

阿明。

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

Answer 1

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

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

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

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

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

Answer 2

我能够确认-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:

Answer 3

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

这个解决方案帮助了我：

-webkit-transform: translateZ(0px);

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

3 个答案: