使用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>
一切正常，除了谷歌地图大部分是灰色的。
因此，我想出了同时使用twitter bootstrap的折叠组件来调整地图大小的最简单方法。注意-仅在最初隐藏地图并使用诸如“ SHOW MAP”（显示地图）之类的按钮时。一个基本的谷歌地图看起来像这样...
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.collapseSo”的折叠动画之后进行某些操作，而不是编写独特的脚本，您可以执行类似以下的简单操作...
$('#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）的百分比，并且它将显示为隐藏状态。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句