Meteor：谷歌地图的引导模式问题答案

【问题标题】：Meteor:Boostrap modal issue with google mapsMeteor：谷歌地图的引导模式问题
【发布时间】：2015-01-23 06:31:26
【问题描述】：

好吧，我正在尝试将谷歌地图放入引导模式，但地图上的图像看起来不适合下载或不适合， 这是我的 js 代码：

Template.map_template.rendered = function (){
  Tracker.autorun(function () {
  initialize();
    });
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
  Tracker.autorun(function () {
  $('#map-modal').on('shown.bs.modal', function() {
    console.log("Se corre esta funcion")
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
    });
    });
}

这是我的模板：

<template name="map_template">
  <div id="map_canvas"> 
  </div>
</template>

我试着把它放在我的 css 上，

    #map_canvas img {
    max-width: none;
     vertical-align: baseline; }

  #map_canvas {
  max-width:600px;
    height: 200px;}

实际上我几乎尝试了所有方法，如果 boostrap.css 或 bootstrap.js (Bootstrap 3) 上有我需要删除或更改的内容，但我的地图如下所示：

希望大家能帮帮我，谢谢！

【问题讨论】：

没有 max-width 可以正常工作吗？
不，兄弟，它没有，谢谢

标签： javascript css twitter-bootstrap google-maps meteor

【解决方案1】：

地图加载后添加回调，并在此处调整大小。

 google.maps.event.addListenerOnce( map, 'idle', function() {
    var currentCenter = map.getCenter();  // Get current center before resizing
    google.maps.event.trigger(map, "resize");
    map.setCenter(currentCenter); 

  });

【讨论】：

【解决方案2】：

这是因为引导程序默认的 15px 填充，使用 !important 将其强制设置为 0 并使用 overflow:hidden 删除滚动条。试试这个

.modal-body{ 填充：0！重要；溢出：隐藏！重要； }

Template.map_template.rendered = function (){
  Tracker.autorun(function () {
  initialize();
    });
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
  Tracker.autorun(function () {
  $('#map-modal').on('shown.bs.modal', function() {
    console.log("Se corre esta funcion")
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
    });
    });
}

.modal-body{
    padding:0 !important;
    overflow: hidden !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <div class="container">

        <h3>Modal Example</h3>

        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Google map issue</h3>
            </div>
            <div class="modal-body">
       <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d14766.053639766564!2d70.79414485!3d22.296414850000016!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1416911006332" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></button>
            </div>
        </div>

    </div>

<style>

【讨论】：