Question

我有一个谷歌地图，用户可以进入全屏模式。我添加了一个带有下拉列表的div作为地图的控件，我将select2插件应用于下拉列表。问题是当地图处于全屏模式时，select2下拉列表不显示列表，当地图未处于全屏模式时，下拉列表正常工作。控制台中没有错误。我尝试改变z-index但没有运气。有什么想法吗？

JSFiddle Example

HTML

    <div id="wrapper">
  <div id="testMap">
  </div>
  <div id="inputControls" style="max-width: 275px">
    Select Country:
    <select id="testDropdownList" class="full-width">
      <option value="-1">-- Select --</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
    </select>
  </div>
</div>

CSS

#wrapper {
    position: relative;
}

#inputControls {
    position: absolute;
    margin-left: 10px;
    top: 85px;
    left: -5px;
    background-color: white;
    color: black;
    z-index: 10;
    padding: 8px;
    font-size: 8pt;
    font-family: Roboto;
    font-weight: normal;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

#inputControls input {
    font-size: 8pt;
    font-family: Roboto;
}

#testMap {
    width: 100%;
    height: 500px;
    position: relative;
    left: -15px;
}

#testDropdownList {
    font-size: 8pt;
}

JS

function initMap() {
  var mapOptions = {
    center: {
      lat: 38.907192,
      lng: 17.036871
    },
    zoom: 2,
    fullscreenControl: true
  };

  testMap = new google.maps.Map(document.getElementById('testMap'), mapOptions);
  testMap.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('inputControls'));

}

$(document).ready(function() {


  initMap();

  $('#testDropdownList').select2({
    theme: "bootstrap"
  });
});

Answer 1

页面加载后使用此脚本：

Array.from(document.getElementsByClassName("pac-container pac-logo hdpi")).forEach(function(item) {
   item.style.zIndex = 2147483647;
});

在google地图全屏时，select2无法正常工作

1 个答案: