Question

你好世界我使用gmaps.js我有一个问题，我无法解决，问题是当我创建地图div它完美的工作，但当我把div（地图容器）放在一个bootstrap模式中它没有加载或显示任何我认为它与＆＃34;显示＆＃34; css中的属性，但我无法解决这个问题感谢您的帮助，这是我的代码

内部文件就绪功能

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

这是我在模态

中的引导行

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

Answer 1

您需要使用

手动调用模态

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

之后，你需要在模态中初始化Gmaps＆quot; shows.s.modal＆＃39;像这样的事件回调：

$('#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/

Answer 2

也许它只是一个CSS问题？请尝试以下样式，例如

#map {
    width: 300px;
    height: 200px;
}

Gmaps.js不会在bootstrap模式中加载

2 个答案: