自举模式对话框中的谷歌地图自动完成结果

我有一个谷歌地图自动完成输入框在一个 Bootstrap 模式对话框和自动完成结果不显示。但是，如果我按向下箭头键，它会选择下一个自动完成结果，因此看起来自动完成代码工作正常，只是结果没有正确显示。也许它隐藏在模态对话框后面？

下面是截图:

Typing something in the autocomplete field gives nothing 在自动补全字段中键入某些内容没有任何意义

Pressing the arrow down key gives the first result 按向下箭头键会得到第一个结果

And the code :

<div class="modal hide fade" id="map_modal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="control-group">
<label class="control-label" for="keyword">Cari alamat :</label>
<div class="controls">
<input type="text" class="span6" name="keyword" id="keyword">
</div>
</div>
<div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>

<script type="text/javascript">
$("#map_modal").modal({
show: false
}).on("shown", function()
{
var map_options = {
center: new google.maps.LatLng(-6.21, 106.84),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};


var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);


var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-6, 106.6),
new google.maps.LatLng(-6.3, 107)
);


var input = document.getElementById("keyword");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo("bounds", map);


var marker = new google.maps.Marker({map: map});


google.maps.event.addListener(autocomplete, "place_changed", function()
{
var place = autocomplete.getPlace();


if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(15);
}


marker.setPosition(place.geometry.location);
});


google.maps.event.addListener(map, "click", function(event)
{
marker.setPosition(event.latLng);
});
});
</script>

我已经尽力自己解决这个问题了，但是由于我不知道自动完成结果的 html 和 css (查看元素什么也没有给出) ，我现在迷失了方向。有什么帮助吗？

谢谢你之前！

52925

小开

最佳答案

问题在于 .modal的 z-index

使用这个 CSS标记:

.pac-container {
background-color: #FFF;
z-index: 20;
position: fixed;
display: inline-block;
float: left;
}
.modal{
z-index: 20;
}
.modal-backdrop{
z-index: 10;
}

你也可以检查最后的演示给你

Ps: 感谢@lilina 在 jsfiddle.com 上的演示

小开

一般情况下，您可以将。Pac-Container z-index 指向任何高于1050的内容，并且不需要其他 CSS 重写。

I discovered that this problem also exists for jQuery UI dialogs. So in case it ends up being helpful to anyone else, here's a quick reference for where the Bootstrap/jQuery UI modals live in the z-plane:

jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050

小开

Bootstrap 的 .modal z-index默认为1050。

jQuery UI's .ui-autocomplete z-index is by default 3.

把这个放在 CSS 上:

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
z-index: 1051 !important;
}

创造奇迹! :)

小开

在我的设想中。Pac-Container 的 z-index 值将是 init 并覆盖到1000，即使是在 CSS 中设置也是如此。(可能是通过 google API?)

我的肮脏手段

$('#myModal').on('shown', function() {
$(".pac-container").css("z-index", $("#myModal").css("z-index"));
}

小开

使用 Bootstrap 3:

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

小开

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

是为了我

Https://github.com/twbs/bootstrap/issues/4160

小开

如果使用 VisualStudio，请在 style.css页上将 z-index的 .modal设置为20。

例如:

.modal {
z-index: 20 !important;
}

小开

这招对我很管用。

                   var pacContainerInitialized = false;
$('#inputField').keypress(function() {
if (!pacContainerInitialized) {
$('.pac-container').css('z-index','9999');
pacContainerInitialized = true;
}
});

小开

我已经花了2,3个小时，只是挖出与谷歌地方 API 下降 z 索引的错误。我终于找到了这个。只需将此代码粘贴到 JS 脚本的顶部并更新输入 ID 名称。

var pacContainerInitialized = false;
$("#inputField").keypress(function() {
if (!pacContainerInitialized) {
$(".pac-container").css("z-index", "9999");
pacContainerInitialized = true;
}
});

完整的参考链接。 Https://groups.google.com/forum/#!topic/google-maps-js-api-v3/gzx0ynqnn1m 多亏了高塔姆。