谷歌地圖搜索框FOUC

Question

當地圖加載位置時，例如，等待地理位置接入，在搜索框中呈現在地圖上像這樣的

任何邊緣知道什麼招數來制止？要麼根本不顯示框，要麼將框放在應該顯示的地圖上。

至於代碼，甚至是谷歌例如，從這個問題的困擾：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

Answer 1

正在發生的事情是，<input>元素是HTML標記的一部分，並且是在頁面上也可見之前谷歌地圖已經完成initalization 。這不是一個錯誤，甚至是意外的行爲。你有兩個選擇：

）設置<input>盒visibility隱藏：

<input id="pac-input" class="controls" type="text" 
placeholder="Enter a location" style="visibility:hidden;"> 

並顯示框，因爲過去的事情在initialize()

google.maps.event.addListener(map, 'idle', function() { 
    input.style.visibility='visible'; 
}); 

看到小提琴 - >http://jsfiddle.net/xkAaJ/

）按代碼創建輸入框。取出<input>標記，並與

var input = document.createElement('input'); 
input.id="pac-input"; 
input.className="controls"; 
input.type="text"; 
input.placeholder="Enter a location"; 

看到更換

var input = /** @type {HTMLInputElement} */( 
     document.getElementById('pac-input')); 

在 initialize()

小提琴 - >http://jsfiddle.net/wy6X3/

的代碼示例是基於谷歌的地方比如你是指的在題。