如何使谷歌下列表显示在模态中答案

【问题标题】：How to make google underlist shown in modal如何使谷歌下列表显示在模态中
【发布时间】：2017-03-20 04:17:09
【问题描述】：

我是这个领域的新手，正在尝试在我的应用上实现谷歌自动完成功能，像这样https://plnkr.co/edit/GUs28h2ncbbhx8dEmiz5?p=preview。这是一个非常简单的例子，只是为了测试谷歌地图。但是autocomplete的underlist总是在modal外面，你可以按login输入地址，就可以看到了。你知道这是为什么吗？

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="all.js"></script>
    <!--link rel="stylesheet" href="main.css"-->
</head>
<body ng-controller="mainControl as mc">

    <div>
        <div ng-hide="mc.values.logged">

            <button type="button" class="btn" data-toggle="modal" data-target=".logIn">Log In</button>
        </div>
    </div>

    <div class="logIn modal fade" id="logIn" ng-controller='logInControl as lc'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form id="eventForm" name="eventForm" ng-submit="ec.submit()">

                        <label for="locationTextField">Location</label>

                <input id="locationTextField" type="text" size="50">

                    </form>

                </div>

            </div>
        </div>

    </div>



</body>
</html>

顺便说一句，我还有一个问题，我已经成功申请了一个 API-key，但我无法通过将链接替换为

来使用它

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDhab7yuMx-2lllD8kwZIF-yIVGnsCx-0&libraries=places"></script>

你能告诉我为什么吗？

【问题讨论】：

标签： javascript html angularjs google-maps autocomplete

【解决方案1】：

根据 issue #4160 登录的问题跟踪器，您可以尝试将 google 位置自动完成下拉结果放在引导模式 1050 zindex 上方：

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

还请查看这些相关 SO 帖子中的建议解决方案：

另一方面，关于您的 API 密钥，请检查您的控制台中显示的错误代码或消息，然后检查如何在 Google Maps JavaScript API Error Codes 和 Google Maps JavaScript API Error Codes for Developers 中修复它。

这个与SO post 相关的无效 API 密钥也可能对您有所帮助。

编码愉快！

【讨论】：