如何在 Bootstrap modals 上放置 Google Map Places 搜索框答案

【问题标题】：How to put a Google Map Places Search Box on Bootstrap modals如何在 Bootstrap modals 上放置 Google Map Places 搜索框
【发布时间】：2015-05-01 04:15:30
【问题描述】：

我现在正尝试在我的网页上添加一个 Google 地图位置搜索框。我想将它添加到 Bootstrap 模态。我已成功添加 Box；但是，搜索结果隐藏在模态下，如下图所示。我不知道如何解决这个问题。谁能给我一些建议？谢谢。

这是我使用 javaScript 添加搜索框的方法：

function searchBoxInit(){
        var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input'));
        //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var searchBox = new google.maps.places.SearchBox(/** @type {HTMLInputElement} */(input));
        google.maps.event.addListener(searchBox, 'places_changed', function() {
            var places = searchBox.getPlaces();
            if (places.length == 0) {
                return;
            }
            place = places[0];
            newpName = place.name;
            newpLat = place.geometry.location.lat();
            newpLong = place.geometry.location.lng();
        });     
    }

function displaySearchEngine(){
        var objElement = document.getElementById('pac-input');
        searchBoxInit();
        objElement.style.display = 'block';
        objElement.style.visibility = 'visible';
}

引导程序 http://getbootstrap.com/javascript/#modals

地点搜索框 https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=zh-Tw

【问题讨论】：

我建议粘贴一个 JSFiddle 链接供其他人帮助您测试。
您必须更改搜索结果的 z-index 属性。您能否将您的完整内容粘贴到 JSFiddle 以便我向您展示。
感谢您的帮助！我发现了问题并解决了这个问题。 modal 的默认 z-index 为 1040，搜索结果列表 pac-container 的默认 z-index 为 1000。将 pac-container 的 z-index 更改为 1050 即可！

标签： google-maps-api-3 bootstrap-modal

【解决方案1】：

在你的 CSS 中添加这个样式

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}

原始回复：here

【讨论】：