引导模式对话框中的 Google 地图自动完成结果 [英] Google Maps Autocomplete Result in Bootstrap Modal Dialog

问题描述

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

截图如下:

在自动完成字段中输入一些东西什么都没有

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

和代码:

<div id="map_canvas" style="width:530px; height:300px"></div>

<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">关闭</a><a href="#" class="btn btn-primary">保存更改</a>

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

之前谢谢！

解决方案

问题出在.modal

的z-index

使用这个 CSS 标记:

.pac-container {背景颜色:#FFF；z-索引:20；位置:固定；显示:内联块；向左飘浮;}.modal{z-索引:20；}.modal-backdrop{z-索引:10；}

您也可以在此处

查看最终演示

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

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?

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?

Thanks before!

解决方案

The problem is with the z-index of the .modal

Use this CSS markup:

.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

这篇关于引导模式对话框中的 Google 地图自动完成结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！