javascript - 如何使谷歌下划线以模式显示

标签 javascript html angularjs google-maps autocomplete

我是这个领域的新手,正在尝试在我的应用中实现谷歌自动完成功能, 像这样https://plnkr.co/edit/GUs28h2ncbbhx8dEmiz5?p=preview . 这是一个非常简单的例子,只是为了测试谷歌地图。 但是autocomplete的underlist总是outside 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> 

你能告诉我为什么吗? enter image description here

最佳答案

基于 issue #4160登录 Issues tracker,您可以尝试将 google places autocomplete 下拉结果放在 bootstrap modal 1050 zindex 之上:

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

另请检查这些相关 SO 帖子中建议的解决方案:

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

此无效 API key 相关 SO post也可能对您有所帮助。

编码愉快!

关于javascript - 如何使谷歌下划线以模式显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40454710/

相关文章:

javascript - 显示ajax、Jquery返回的响应的html代码

javascript - 在 d3 中处理多个下拉列表

JavascriptConfirm() 基于 GridView 中行的动态文本

javascript - 使用 jQuery 在两个按钮之间切换

angularjs - 元素包含

javascript - 如何实现与数字输入绑定(bind)范围的 slider

javascript - 在移动设备上可玩的简单 HTML5 游戏使用什么

javascript - 绑定(bind)输入并选择一个 ng-model

javascript - 纯函数的参数数量不受支持

html - 我怎样才能在一张表现不同的图像中有 2 个悬停?