引导模式对话框中的谷歌地图自动完成结果答案

【问题标题】：Google Maps Autocomplete Result in Bootstrap Modal Dialog引导模式对话框中的谷歌地图自动完成结果
【发布时间】：2012-06-13 00:58:11
【问题描述】：

我在 Twitter Bootstrap 模式对话框中有一个 Google 地图自动完成输入字段，但未显示自动完成结果。但是，如果我按向下箭头键，它会选择下一个自动完成结果，所以似乎自动完成代码工作正常，只是结果没有正确显示。也许它隐藏在模态对话框后面？

截图如下：

在自动完成字段中输入内容没有任何效果

按向下箭头键给出第一个结果

还有代码：

<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（检查元素什么也没给出），所以我现在迷路了。有什么帮助吗？

之前谢谢！

【问题讨论】：

我取得了一些进展，但碰壁了。我将解释我发现的内容，以帮助其他人希望解决您的问题。我重新排列了文本框，看起来自动完成不仅在模式后面，而且也在灰色区域后面（查看这个演示）jsfiddle.net/Y4WgX/embedded/result更改 z-index 无效。我还了解到这些建议位于一个名为 pac-container 的 div 中，因此我将其颜色更改为绿色以进行演示。

标签： javascript html css google-maps-api-3 twitter-bootstrap

【解决方案1】：

问题在于.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;        
}

您也可以查看最终演示here

ps：感谢 @lilina 在 jsfiddle.com 上的演示

【讨论】：

为什么这一切都是必要的？我知道是这样，但为什么呢？这也使模态对我来说很远，并且引导静态导航栏现在在它上面。替代品？
@MarcM。您使用的是什么版本的引导程序？我认为如果您提出一个包含问题的全部详细信息的新问题会更好。
我发现这将我的模式放在导航栏后面，看起来不正确。尝试将 .pac-container 的 z 索引更改为 1050
@JeffFinn 好的，您可以打开一个新问题，我可以尝试帮助您，您必须检查这是引导程序 2，您使用的是相同的版本吗？如果是这种情况，我看不出拒绝答案的原因，因为您可以看到它帮助了一些人。
.pac-container { z-index: 1070; } 只是你需要的东西。如果您的页面中有 .navbars，它们具有不同的 z-Index，而不是更改所有引导程序 z-index 还不如只在 GMaps 上执行 z-index。 GeoComplete.js 也会出现这个问题

【解决方案2】：

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

为我做的

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

【讨论】：

有效！您可能需要根据您的 css 增加 z-index 值。
这在primefaces上对我有用，我有这样的地图：
这个回答修复了这个错误。
我需要将其更改为 9999，但它可以工作。（引导程序 4）
如果您像我一样想知道，.pac-container 是 Places AutoComplete 的容器，而不是与引导程序相关的任何内容。我的模态不是来自 Twitter Bootstrap，所以我无法理解哪个 CSS 真正重要（其他答案有多个 CSS 部分）。
工作完美，模式和背景仍在标题和侧边菜单上，谢谢

【解决方案3】：

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;
}

创造奇迹！ :)

【讨论】：

如果这对您不起作用，可能是因为 .ui-autocomplete 不存在。而是将其与接受的答案结合起来并执行 .pac-container { z-index: 1051; } 这比预期的答案要干净得多，并且对您的其他代码的影响要小得多

【解决方案4】：

使用 Bootstrap 3：

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

【讨论】：

谢谢你的回答，我也改成了1050

【解决方案5】：

在我的场景中 .pac-container 的 z-index 值将是 init 并覆盖为 1000，即使我在 CSS 中设置。（可能通过 google API？）

我的肮脏修复

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

【讨论】：

这有帮助，尽管在较新的 Bootstrap 中，事件是 'shown.bs.modal'。

【解决方案6】：

我已经花了 2.3 个小时来挖掘 google places API drop down z index 的错误。最后我找到了这个。只需将此代码粘贴到您的 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 感谢 Gautam。

【讨论】：

【解决方案7】：

一般来说，您可以将 .pac-container z-index 提高到 1050 以上的任何值，并且不需要其他 CSS 覆盖。

我发现 jQuery UI 对话框也存在这个问题。因此，如果它最终对其他人有所帮助，这里有一个关于 Bootstrap/jQuery UI 模态在 z 平面中的位置的快速参考：

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

【讨论】：

【解决方案8】：

这对我有用。

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

【讨论】：

【解决方案9】：

如果您使用的是 Visual Studio，请在您的 style.css 页面上将 z-index 的 .modal 设置为 20。

例如

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

【讨论】：