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

使用Google Maps API V3时，我确实被困在一个非常奇怪的问题。Google地图标记仅在iPhone/iPad上以特定缩放级别消失

我有一个iframe的地图显示了很多的标记与一些自定义InfoBoxes到每个上点击这里：

http://www.whist.ch/karte

一切工作的我已经在Mac和PC测试的所有浏览器罚款（Chrome，Firefox，IE）。然而，在iPad和iPhone上，当放大太近时标记会消失，并在缩小时再次出现。

有没有人有解释或修复？

非常感谢，

阿明。

ps。在iPad上的谷歌地图也有一些丑陋的白线，也许有人知道如何摆脱这些:)

来源

2012-02-10 seltzdesign

你尝试Mac上的Safari浏览器？我只是做了，而且标记甚至根本没有出现在任何时间。 – miguev 2012-02-10 18:35:30

经过大量的激烈调试，我想我找到了解决我的问题（也许你也是）。 Google似乎也意识到了这个问题，这就是我找到解决方案的方式。我使用了一个称为weinre（documentation）的真棒调试器，它是基于webkit的浏览器的远程调试工具。

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

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

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

文艺青年最爱的是iPad的错误...解决增加-webkit-transform: translateZ(0px);以任何消失。

来源

2012-04-23 18:05:54

Mac上的Safari 6.0.4有一些标记失真问题，同样的修复也适用于这种情况。 – margusholland 2013-06-01 20:58:08

非常感谢你，这只是花了我很长时间才发现，非常烦人，它不明白为什么他们会消失。再次感谢。 – GraafM 2017-11-17 10:19:23

我能够确认-webkit-transform：translateZ（0px）重置解决了这个问题。不过，我认为这是Google 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:

来源

2012-06-07 16:10:35 patrickfox

我也看到这个问题，但只有我的信息框 – abe 2013-08-06 22:47:38

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

该解决方案帮助我：

-webkit-transform: translateZ(0px);

来源

2016-06-13 13:36:51

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

回答

相关问题