javascript - Gmaps.js 未在 Bootstrap 模式内加载

Question

Hello World ，我正在使用 gmaps.js 我有一个无法修复的问题，问题是当我创建 map div 时它工作得很好，但是当我将 div( map 容器)放入 Bootstrap 模式时它却不起作用加载或显示任何内容，我认为它与 css 中的“显示”属性有关，但我无法修复该问题感谢您的帮助，这是我的代码

内部文档准备功能

  map = new GMaps(
 {
   el: '#map',
   lat:36.184164,
   lng:43.975181,
   click:function (e) {
    console.log(e.latLng.lat());
 }
});

这是我在模态中的 Bootstrap 行

 <div class="row" style="background: red;">
    <div class="col-lg-12">
            <div id="map"></div>
    </div>
</div>

Answer 1

您需要使用

手动调用模式

$('#myModal').modal('show')

之后，您需要在模态“shown.s.modal”事件回调中初始化 Gmap，如下所示:

$('#myModal').on('shown.bs.modal', function (e) {
  map = new GMaps({
   el: '#map',
   lat:36.184164,
   lng:43.975181,
   click:function (e) {
    console.log(e.latLng.lat());
   }
  });
});

工作中的 JSFiddle: http://jsfiddle.net/9n4592jv/1/