Question

我正在尝试在Google地图上打开模式叠加层。工作原理：我单击标记->单击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元素的模式

Answer 1

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

如Bootstrap's documentation中所述：

模式使用位置：固定，有时可能会有些特殊关于其渲染。尽可能将模式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>

希望这会有所帮助！

Answer 2

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

当我尝试打开模式模式时

2 个答案: