javascript - 谷歌地图自动完成设置后不工作

Question

我已经查看了关于 SO 的大多数问题，这些问题围绕着谷歌地图自动完成的主题，并且还查看了文档。出于某种原因，尽管已经设置了 JS 和 HTML，但客户端似乎什么也没有发生。我还查看了开发者控制台的错误，但没有发现任何错误。

这是我拥有的包含的脚本标签:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY_HERE&libraries=places"></script>

html

 <div class="form-group row">
      <label for="example-text-input" class="col-sm-2 col-form-label">City</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" type="text" id="city" placeholder="San Francisco, Oakland, etc..">
      </div>
 </div>
<script>
function initialize() {
    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

我不知道从这里可以做什么。如果我可以提供更多信息，请告诉我。提前致谢!

Answer 1

啊，我发现错误了。我在引导模态中有这个自动完成输入框，自动完成选项隐藏在模态后面，因为它有一个自然的 z 轴。为了解决这个问题，我只是添加了一些简单的 css:

.pac-container {
  z-index: 10000 !important;
}