如何在引导程序 3 模态弹出窗口中正确显示谷歌地图

Question

我可以在页面上成功显示谷歌地图并且工作正常。

这是我的问题：

我试图在 bootstrap 3 modals 中显示谷歌地图。 为此，我已实施的解决方案在这里找到源，但仍无法得到它的工作按

$('#myModal_map').on('shown.bs.modal', function(){
      
    initMap();
    
        });

有人可以帮我吗。 这是我到目前为止的编码工作

<div class="container">

  <div class="modal fade" id="myModal_map" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
 <button type="button" class="pull-right btn btn-default" data-dismiss="modal">Close</button>
      
        </div>
        <div class="modal-body">






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

    <script>
      var customLabel = {

        V: {
          label: 'P'
        }
      };



        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 11
        });
        var infoWindow = new google.maps.InfoWindow;

              downloadUrl('map.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
 
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
             var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};



              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label,
 title : 'welcome'
              });
              marker.addListener('click', function() {                
infoWindow.setContent('<b>'+name + "</b><br>" + address);

                infoWindow.open(map, marker);
              });
            });
          });

        }


      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}

/*

 $('#myModal_map').on('shown.bs.modal', function(){
  
initMap();

    });
*/

    </script>

 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=my keys-goes-here&callback=initMap">
    </script>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

它是通过为 #map div 添加一个大小并通过初始化initmap()函数内的showed.bs.modal属性来解决的

#map {
  width:500px;
  height:500px;
}



$("#myModal").on("shown.bs.modal", function () {initMap();});