Javascript Bootstrap 模式对话框中的 Google 地图自动完成结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10957781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps Autocomplete Result in Bootstrap Modal Dialog
提问by Furunomoe
I have a Google Maps Autocomplete input field inside a Twitter Bootstrap modal dialog and the autocomplete result is not displayed. However, if I press the down arrow key, it selects the next autocomplete result, so it seems that the autocomplete code works correctly, only that the result is not displayed correctly. Maybe it's hidden behind the modal dialog?
我在 Twitter Bootstrap 模式对话框中有一个 Google 地图自动完成输入字段，但未显示自动完成结果。但是，如果我按下向下箭头键，它会选择下一个自动完成结果，因此似乎自动完成代码工作正常，只是结果显示不正确。也许它隐藏在模态对话框后面？
Here's the screenshots :
这是屏幕截图：
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>
I've tried my best to solve this on my own, but since I don't know the html&css for the autocomplete result (inspect element gives nothing), I'm in a lost now. Any helps?
我已经尽力自己解决了这个问题，但是由于我不知道自动完成结果的 html&css（检查元素什么也没给出），我现在迷路了。有帮助吗？
Thanks before!
先谢过！
回答by Luis
The problem is with the z-indexof the .modal
问题是用z-index的.modal
Use this CSSmarkup:
使用此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;
}?
Also you can check the final demo here
您也可以在此处查看最终演示
ps:thanks to @lilina for that demo on jsfiddle.com
ps：感谢@lilina 在 jsfiddle.com 上的演示
回答by Vyacheslav Shevchenko
.pac-container {
z-index: 1051 !important;
}
did it for me
为我做的
回答by Rudi Wijaya
Bootstrap's .modalz-indexis by default 1050.
Bootstrap 的.modalz-index默认值为 1050。
jQuery UI's .ui-autocompletez-indexis by default 3.
jQuery UI 的.ui-autocompletez-index默认值为 3。
So put this on the CSS:
所以把它放在 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;
}
Works wonders! :)
创造奇迹！:)
回答by Pedro Casado
Worked with Bootstrap 3:
与 Bootstrap 3 一起使用：
.pac-container {
z-index: 1040 !important;
}
回答by vincentlcy
In my scenario the .pac-container 's z-index value will be init and override to 1000, even I set in CSS. (possibly by google API?)
在我的场景中， .pac-container 的 z-index 值将被初始化并覆盖为 1000，即使我在 CSS 中设置。（可能是由谷歌 API 提供的？）
my dirty fix
我肮脏的修复
$('#myModal').on('shown', function() {
$(".pac-container").css("z-index", $("#myModal").css("z-index"));
}
回答by Ryan Shih
In general, you can just bump up the .pac-container z-index to anything above 1050 and you won't need the other CSS overrides.
通常，您可以将 .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 对话框也存在这个问题。因此，如果它最终对其他人有帮助，这里有一个关于 Bootstrap/jQuery UI 模态在 z 平面中的位置的快速参考：
jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050
回答by Nasir ali
I have spend 2,3 hours to just digging out the error with google places API drop down z index. Finally I have found this. Just paste this code at top of your JS script and update the input id name.
我花了 2,3 个小时才用谷歌地点 API 下拉 z 索引来挖掘错误。最后我找到了这个。只需将此代码粘贴到您的 JS 脚本顶部并更新输入 id 名称。
var pacContainerInitialized = false;
$("#inputField").keypress(function() {
if (!pacContainerInitialized) {
$(".pac-container").css("z-index", "9999");
pacContainerInitialized = true;
}
});
Full reference link. https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1MThanks to Gautam.
完整参考链接。 https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1M感谢 Gautam。
回答by ash
This worked for me.
这对我有用。
var pacContainerInitialized = false;
$('#inputField').keypress(function() {
if (!pacContainerInitialized) {
$('.pac-container').css('z-index','9999');
pacContainerInitialized = true;
}
});
回答by Jabulani Vilakazi
If you are using Visual Studio, on your style.csspage set the z-indexfor .modalto 20.
如果您使用的是 Visual Studio，请在您的style.css页面上将z-indexfor设置为.modal20。
e.g
例如
.modal {
z-index: 20 !important;
}
