Bootstrap Modal对话框中的Google地图自动完成结果
Bootstrap Modal对话框中的Google地图自动完成结果
提问于 2012-06-09 09:54:11
我在Twitter Bootstrap模式对话框中有一个Google Maps Autocomplete输入字段，但没有显示autocomplete结果。但是，如果我按下向下箭头键，它会选择下一个自动完成结果，因此看起来自动完成代码工作正常，只是结果没有正确显示。也许它隐藏在模式对话框后面？
截图如下：
在自动完成字段中键入内容将不会显示任何内容
按向下箭头键将显示第一个结果
和代码：
<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(检查元素什么也不给)，所以我现在很迷茫。有什么帮助吗？
之前谢谢你了！
回答 8
Stack Overflow用户
发布于 2014-10-06 00:20:15
Stack Overflow用户
发布于 2012-10-08 17:24:04
Bootstrap的.modal z-index缺省情况下为1050。
jQuery UI的.ui-autocomplete z-index默认为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;
}创造奇迹！:)
Stack Overflow用户
发布于 2013-09-05 03:03:29
使用Bootstrap 3：
.pac-container {
z-index: 1040 !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10957781
复制相关文章
相似问题