Question

使用twitter bootstrap折叠组件隐藏后，如何重置Google地图？我读过其他类似的问题，有人说“使用这个”，然后给出这行代码......

google.maps.event.trigger(map, 'resize')

所以我复制该代码并将其粘贴到我的代码的底部，如下所示

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.86325,-82.275448),
      zoom: 14
    };
     var mapDiv = document.getElementById('toggle-map');
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

  google.maps.event.addDomListener(mapDiv, 'click', mapResize);      
  setMarkers(map, properties);

}
    function mapResize(){
        google.maps.event.trigger(map, 'resize');
    }

我认为地图正在调整大小但是在崩溃动画完成之前发生的速度太快了。我该如何推迟？

这是我想要实现的代码。

<div id="onTheMap" class="fixer collapse"><div id="map-canvas"></div>
</div>
<nav class="navbar navbar-inverted navbar-fixed-bottom">
<div class="container-fluid">
<center><button id="toggle-map" data-toggle="collapse" data-target="#onTheMap">
<h1>SHOW MAP <span class="glyphicon glyphicon-chevron-up"></span></h1>
</button> </center>
</div>
</nav>

除了谷歌地图主要是灰色外，所有功能都完美无缺。

Answer 1

所以我想出了使用twitter bootstrap的折叠组件同时调整地图大小的最简单方法。注意 - 仅当您最初隐藏地图并使用类似＆＃34; SHOW MAP＆＃34;按钮。一个基本的谷歌地图看起来像这样......

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);

最后一行是您需要更改的部分。 Twitter引导程序可以选择在崩溃动画调用shown.bs.collapse之后使某些事情发生。因此，您可以做一些像这样简单的事情......

$('#toTheMap').on('shown.bs.collapse', function (e) {
initialize();
  })

这是我在该代码中引用的html ...

<div id="toTheMap" class="fixer collapse">
  <div id="map-canvas"></div>
</div>
<nav class="navbar navbar-inverted navbar-fixed-bottom">
  <div class="container-fluid">
      <button id="toggle-map" data-toggle="collapse" data-target="#toTheMap">
  <h1>SHOW MAP <span class="glyphicon glyphicon-chevron-up"></span></h1>
  </button>
</div>
</nav>

我更容易将地图放在固定的div中。我还必须给地图高度一个像素大小，而不是百分比。如果我给它一个百分比，地图将缩小到0高度并保持其高度为0（总是0）的百分比，它将显示为隐藏。

Answer 2

确保您明确设置地图容器的高度。这是一个可以帮助你的实例！

http://www.bootply.com/xAyS3qh87Y

使用Twitter Bootstrap从隐藏区域显示Google地图

2 个答案: