Javascript 谷歌地图自动完成建议未出现
我正在尝试用HTML和JavaScript为谷歌地图创建自动完成， 我使用的是引导模式。 但它并没有给出建议。这是我的代码：Javascript 谷歌地图自动完成建议未出现,javascript,html,twitter-bootstrap,google-maps,Javascript,Html,Twitter Bootstrap,Google Maps,我正在尝试用HTML和JavaScript为谷歌地图创建自动完成， 我使用的是引导模式。 但它并没有给出建议。这是我的代码： 你好，世界！ 阿布里尔·马帕 情态标题 &时代； 接近 保存更改 函数init（）{ var map=new google.maps.map（document.getElementById（'map-canvas'）{ 中心：{ 拉脱维亚：12.9715987， 液化天然气：77.594562699998 }, 缩放：12 }); var searchBox=new
你好，世界！
阿布里尔·马帕
情态标题
&时代；
接近
保存更改
函数init（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：{
拉脱维亚：12.9715987，
液化天然气：77.594562699998
},
缩放：12
});
var searchBox=new google.maps.places.searchBox（document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.TOP_CENTER].push（document.getElementById（'pac-input'）；
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
searchBox.set（'map'，null）；
var places=searchBox.getPlaces（）；
var bounds=new google.maps.LatLngBounds（）；
var i，地点；
for（i=0；place=places[i]；i++）{
（功能（地点）{
var marker=new google.maps.marker({
位置：place.geometry.location
});
marker.bindTo（'map'，searchBox，'map'）；
google.maps.event.addListener（标记'map_changed'，函数（）{
如果（！this.getMap（））{
这是；
}
});
扩展（place.geometry.location）；
}(地点);；
}
映射边界（bounds）；
searchBox.set（'map'，map）；
setZoom（Math.min（map.getZoom（），12））；
});
}
google.maps.event.addDomListener（窗口'load'，init）；
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.pac-container{
z-index:9999;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Abrir mapa
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box" style="z-index:9999;">
</div>
<div class="container" id="map-canvas" style="height:300px;z-index:9995;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=AIzaSyAxBhvzi2eGU7HbBb5cNw5lAkb1eODMG3s"></script>
<script>
function init() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 12.9715987,
lng: 77.59456269999998
},
zoom: 12
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),12));
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</html>
你好，世界！
.pac集装箱{
z指数：9999；
}
阿布里尔·马帕
情态标题
&时代；
接近
保存更改
函数init（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：{
拉脱维亚：12.9715987，
液化天然气：77.594562699998
},
缩放：12
});
var searchBox=new google.maps.places.searchBox（document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.TOP_CENTER].push（document.getElementById（'pac-input'）；
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
searchBox.set（'map'，null）；
var places=searchBox.getPlaces（）；
var bounds=new google.maps.LatLngBounds（）；
var i，地点；
for（i=0；place=places[i]；i++）{
（功能（地点）{
var marker=new google.maps.marker({
位置：place.geometry.location
});
marker.bindTo（'map'，searchBox，'map'）；
google.maps.event.addListener（标记'map_changed'，函数（）{
如果（！this.getMap（））{
这是；
}
});
扩展（place.geometry.location）；
}(地点);；
}
映射边界（bounds）；
searchBox.set（'map'，map）；
setZoom（Math.min（map.getZoom（），12））；
});
}
google.maps.event.addDomListener（窗口'load'，init）；