谷歌地图搜索框FOUC

Question

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

任何人都知道阻止这个的伎俩吗？要么根本不显示框，要么将框放在地图中应该是的位置。

至于代码，即使Google示例也遇到此问题：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

Answer 1

正在发生的事情是<input>元素是HTML标记的一部分，并且在谷歌地图完成初始化之前也可以在页面上看到。这不是错误甚至是意外行为。您有两种选择：

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';
});

看小提琴 - ＆gt;的 http://jsfiddle.net/xkAaJ/

2 ）按代码创建输入框。删除<input>标记并替换

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

<{1>}中的

initialize()

看小提琴 - ＆gt;的 http://jsfiddle.net/wy6X3/

代码示例基于您在问题中引用的Google地方示例。