谷歌地图搜索框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/

的代码示例是基于谷歌的地方比如你是指的在题。