Question

我是这个领域的新手，并试图在我的应用上实施谷歌自动完成功能，像这样https://plnkr.co/edit/GUs28h2ncbbhx8dEmiz5?p=preview。这是一个非常简单的例子，只是为了测试谷歌地图。但是自动完成的下表总是在模态之外，你可以按登录并输入地址，你可以看到它。你知道为什么吗？

<!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密钥，但我无法通过替换

链接来使用它

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

Coud你告诉我为什么？

Answer 1

基于issue #4160登录问题跟踪器，您可以尝试将google地点自动完成下拉结果置于bootstrap模式1050 zindex上方：

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

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

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

此无效的API密钥SO post也可能对您有帮助。

快乐的编码！

如何制作模态中显示的谷歌下载列表

1 个答案: