Question

我正在尝试将google地图放入bootstrap模式中，但地图上的图片看起来不会下载或不合适， 这是我的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）上有什么东西，请试试，但我的地图看起来像这样： screenshot google map

伙计们，我希望你能帮助我，谢谢！

Answer 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); 

  });

Answer 2

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

.modal体{ 填充：0！重要; 溢出：隐藏！重要; }

map

＆＃13;

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
    });
    });
}

＆＃13;

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

＆＃13;

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

＆＃13;

Meteor：google地图的Bootstrap模态问题

2 个答案: