在谷歌地图全屏时，select2无法正常工作 [英] select2 not working when in google maps fullscreen

问题描述

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

I have a google map that a user can go into fullscreen mode. I add a div with a dropdown as controls to the map and I apply the select2 plugin to the dropdown. The problem is the select2 dropdown doesn't show the list when the map is in fullscreen mode, when the map is not in fullscreen mode the dropdown works correctly. There are no errors in the console. I tried changing the z-index but had no luck. Any ideas?

JSFiddle示例

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"
  });
});

推荐答案

在页面加载后使用此脚本：

Use this script after page load:

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

这篇关于在谷歌地图全屏时，select2无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！