我是这个领域的新手,正在尝试在我的应用中实现谷歌自动完成功能, 像这样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>
最佳答案
基于 issue #4160登录 Issues tracker,您可以尝试将 google places autocomplete 下拉结果放在 bootstrap modal 1050 zindex 之上:
.pac-container {
z-index: 1051 !important;
}
另请检查这些相关 SO 帖子中建议的解决方案:
- jQuery's Autocomplete dropdown is not showing after upgrade to jQuery UI 1.10.3
- jquery UI autocomplete inside a modal ui dialog - suggestions not showing?
另一方面,关于您的 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/