代码之家  ›  专栏  ›  技术社区  ›  Vpa

谷歌地图在模态中只显示灰色,双击后显示

  •  2
  • Vpa  · 技术社区  · 7 年前

    Javascript:

    <script type="text/javascript">
       var map;
       function initMap() {
         var mapCanvas = document.getElementById('gmap_basic');
         var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8
          }
         map = new google.maps.Map(mapCanvas, mapOptions)
         google.maps.event.addDomListener(window, 'load', initMap);
         }
        $('#myModal').on('shown.bs.modal', function () {
          google.maps.event.trigger(map, "resize");
        });
     </script>
    
     <script async defer src="https://maps.googleapis.com/maps/api/js?key='YOUR KEY'&callback=initMap"></script>
    

    CSS

    #gmap_basic {
        height: 300px;
        width: 400px;
    }
    

    html

    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="gmap_basic"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
         </div>
       </div>
     </div>
    
    <a class="btn btn-default" data-toggle="modal" data-target="#myModal">Map</a>
    

    在控制台和网络中运行时没有错误,但在模式中只显示灰色。双击后,将显示地图,但仅显示全屏选项。。。(缩放选项和卫星选项未显示)。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Vadim Gremyachev    7 年前

    最有可能发生在 resize 事件从未触发,请尝试将其包装在内部 . ready() 确保的功能 shown.bs.modal 加载DOM后会触发事件,如下所示:

    $(function () {
      $('#myModal').on('shown.bs.modal', function () {
            google.maps.event.trigger(map, "resize");
            console.log('resize');
      });  
    });
    

    谷歌地图的加载方式也存在另一个问题。 由于映射是通过初始化的 callback 参数,此行:

     google.maps.event.addDomListener(window, 'load', initMap);    
    

    此处不需要。

    Demo