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

Javascript:

html

接近
地图

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

---

最有可能发生这种情况的原因是从未触发过

resize

事件，请尝试将其包装在函数中，以确保加载DOM后触发

show.bs.modal

事件，如下所示：

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

谷歌地图的加载方式还有另一个问题。 由于映射是通过

回调

参数初始化的，因此此行：

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

这里不需要

---

但我尝试将坐标输入到输入框中，在单击“地图”后，输入文本字段应显示lat long，同样的问题再次出现。（仅地图为灰色）；P

<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>

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

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