使用 Twitter Bootstrap 从隐藏区域显示谷歌地图 [关闭]答案

【问题标题】：Google Maps Display from Hidden Area using Twitter Bootstrap [closed]使用 Twitter Bootstrap 从隐藏区域显示谷歌地图 [关闭]
【发布时间】：2014-08-22 04:57:21
【问题描述】：

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

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>

除了谷歌地图大部分是灰色的之外，一切都完美无缺。

【问题讨论】：

标签： jquery google-maps twitter-bootstrap-3 hidden collapse

【解决方案1】：

确保您明确设置地图容器的高度。这是一个可以帮助您的工作示例...

http://www.bootply.com/xAyS3qh87Y

【讨论】：

我的问题不是如何使用谷歌地图，而是如何在折叠它的父 div 后使其显示。
在 JSfiddle 或 Bootply 上发布您的相关代码以演示问题。
bootply LINK HERE 这是我正在尝试做的一个基本示例，请注意地图是如何损坏的？我不确定如何在动画后调整地图大小

【解决方案2】：

所以我想出了最简单的方法来调整地图大小，同时使用 twitter bootstrap 的折叠组件。注意 - 这仅适用于您最初隐藏地图并使用“显示地图”按钮之类的东西。一个基本的谷歌地图看起来像这样......

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 bootstrap 有一个选项可以在名为 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）并且它会显示为隐藏。

【讨论】：