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上以特定縮放級別消失

回答

相關問題