google-maps - 在谷歌地图全屏中时 select2 不起作用

Question

我有一个谷歌地图，用户可以进入全屏模式。我添加一个带有下拉列表的 div 作为 map 的控件，并将 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;
});