谷歌地图搜索框FOUC

Question

当地图加载位置时，例如等待地理位置访问，搜索框将在地图边缘呈现如下所示

​

​

有人知道阻止这件事的窍门吗？要么根本不显示盒子，要么把盒子放在地图上它应该在的地方。

至于代码，即使是Google的例子也有这个问题：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete。

Answer 1

正在发生的事情是，<input>元素是HTML的一部分，在google完成独立化之前，它在页面上也是可见的。这不是一个错误，甚至不是意外的行为。你有两个选择：

( 1)将<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/

( 2)通过代码创建输入框。删除<input>标记并替换

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

在initialize()中

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

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

代码示例基于您在问题中引用的google places示例。