下拉菜单显示在 div 之外

Question

我想在我的 google 地图 api 的信息 window 中放置一个按钮下拉菜单，但是，当我单击该按钮以激活下拉菜单时，它出现在里面信息 window 而不是使信息 window 可滚动的外部信息。

信息window代码：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = 
      `<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>`;

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });

这是一个演示：https://jsfiddle.net/zr52yo18/

我希望下拉菜单显示在信息之外 window。

Answer 1

添加以下 CSS 即可。

div.gm-style-iw {
  overflow: visible !important;
  padding: 20px !important;
}
div.gm-style-iw-d{
  overflow: visible !important;
}

这是演示：https://jsfiddle.net/gxay38dz/