出现在 div 之外的下拉菜单答案

【问题标题】：Dropdown menu to appear outside of div出现在 div 之外的下拉菜单
【发布时间】：2021-01-16 06:48:59
【问题描述】：

我想在我的 google map api 的信息窗口内放置一个按钮下拉菜单，但是，当我单击按钮激活下拉菜单时，它会出现在信息窗口内而不是在信息窗口外，这使得信息窗口可滚动。

信息窗口代码：

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/

我希望下拉菜单出现在信息窗口之外。

【问题讨论】：

标签： javascript html css google-maps-api-3 google-maps-markers

【解决方案1】：

添加以下 CSS 即可。

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

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

【讨论】：

是的，但是如果列表变大，它就不起作用了
我已经更新了我的答案和小提琴链接，你可以试试这个，它会起作用的。