当我尝试打开模式时，谷歌地图冻结答案

【问题标题】：Google Map freezes when I try to open modal当我尝试打开模式时，谷歌地图冻结
【发布时间】：2019-07-15 20:49:42
【问题描述】：

我正在尝试在谷歌地图上打开模式叠加层。它是如何工作的：我点击标记->点击infoWindow（内容）中的链接->覆盖模式必须打开但地图冻结并停止响应。

我尝试显示隐藏元素、引导警报，但不幸的是什么都没有…… 我在编程方面还很陌生，因此将不胜感激。

<div id="wrapper">
  <div id="over_map">
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" arialabelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria- label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="map"></div>
<script>
  function initMap() {
    var options = {
      zoom: 10,
      center: {
        lat: 59.4370,
        lng: 24.7536
      }
    }
    var map = new google.maps.Map(document.getElementById('map'), options);
    //Array of markers
    var markers = [{
        coords: {
          lat: 59.3948,
          lng: 24.8118
        },
        iconImage: 'icon',
        content: '<button type="button" class="btn btn-primary" data-toggle="modal" data-target = "#exampleModal"> Launch demo modal < /button>',
      },
      {
        coords: {
          lat: 59.4293,
          lng: 24.8352
        },
        content: '<h1>Lasna pubi</h1>'
      },
      {
        coords: {
          lat: 59.4079,
          lng: 24.6708
        }
      }
    ];
    //Loop through markers
    for (var i = 0; i < markers.length; i++) {
      addMarker(markers[i]);
    }
    // Add Marker function
    function addMarker(props) {
      var marker = new google.maps.Marker({
        position: props.coords,
        map: map,
        //icon:props.iconImage
      });
      //Check for custom icon
      if (props.iconImage) {
        // Set icon image
        marker.setIcon(props.iconImage);
      }
      //Check content
      if (props.content) {
        var infoWindow = new google.maps.InfoWindow({
          content: props.content
        });
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
    }
  }
</script>

当在标记内容窗口中按下按钮时，带有 HTML 元素的模式打开

【问题讨论】：

您在 sn-p 中发布代码，但 sn-p 无法运行。为什么？请提供一个 Minimal, Reproducible Example 来证明该问题。

标签： javascript html twitter-bootstrap google-maps

【解决方案1】：

此问题不是由于您的 Google 地图冻结了您的模式。这是因为您在其他元素中添加了 Bootstrap 的模式。

如Bootstrap's documentation中所述：

Modal 使用 position: fixed，有时可能有点特殊关于它的渲染。尽可能将模态 HTML 放在顶级职位，避免其他人的潜在干扰元素。嵌套 .modal 时可能会遇到问题另一个固定元素。

尝试将您的模态框放在正文的底部：

<div id="wrapper">
    <div id="over_map"></div>
</div>
<div id="map"></div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" arialabelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

希望这会有所帮助！

【讨论】：

【解决方案2】：

这是因为我用多个位置制作了一个变量标记，而不是多个单独的位置，所以代码运行了第一个模态，但忽略了第二个，只显示半透明的停留。

【讨论】：