Bootstrap模式对话框中的Google地图自动填充结果

Question

我在Twitter Bootstrap模式对话框中有一个Google Maps 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（检查元素什么都没有），我现在迷路了。 有帮助吗？

谢谢！

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

您也可以在这里查看最终演示

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

Answer 2

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

为我做了

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

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

作品奇迹！ :)

Answer 4

使用Bootstrap 3：

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

Answer 5

通常，您可以将.pac-container z-index提升到1050以上的任何值，并且您不需要其他CSS覆盖。

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

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

Answer 6

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

我的脏修复

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

Answer 7

这对我有用。

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

Answer 8

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

例如

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

Answer 9

我花了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感谢Gautam。