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

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

bootstrap-modal maps google-maps javascript

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

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