Question

我有两个可折叠的bootstrap div。在每个div我插入谷歌地图的地图。第一个工作正常，但第二个打开灰色背景，地图不加载。

我调整了地图的大小，但它不起作用。

我的HTML

<div class="content">
<div class="more">
 <a data-toggle="collapse" class="as" href="#extra-1">info</a>
</div>
</div>
<div id="extra-1" class="extra-info collapse">
<div class="maps" data-lon="2.159154" data-lat="41.397207"></div>
</div>
<div class="content">
<div class="more">
 <a data-toggle="collapse" class="as" href="#extra-2">info</a>
</div>
</div>
<div id="extra-2" class="extra-info collapse">
<div class="maps" data-lon="2.159154" data-lat="41.397207"></div>
</div>

和JS

 $( document ).ready(function() {

   window.obj = window.obj || {};
        var obj = window.obj;
obj.mapRendering = {
            eachMap: $('.extra-info'),

            init: function () {
                this.oneMap();
            },

            oneMap: function(){
                var that = this;

                this.eachMap.each(function(a, b){
                    $(b).on('show.bs.collapse', function(){

                        if($(this).attr("loaded") == "true") {
                            console.log("revisited");
                            return this;
                        }

                        var selector = $(this).find('.maps');
                        console.log(selector[0]);

                        var lati = selector.attr("data-lat");
                        var longi = selector.attr("data-lon");

                        var latlng = new google.maps.LatLng(parseFloat(lati),parseFloat(longi));
                        var myOptions = {
                            zoom: 16,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDefaultUI: true,
                            mapTypeControl: false,
                            zoomControl: true
                        };
                        var map = [];
                        map[a] = new google.maps.Map(selector[0], myOptions);

                        google.maps.event.trigger(map[a], 'resize');
                        $(this).attr("loaded", "true");

                        return this;
                    });
                });
            }
        };
 obj.mapRendering.init();
    });

fiddle

谢谢，Alex。

Answer 1

您可能需要更改bootstrap上的回调函数，因此在动画完成后会调用google地图。所以而不是：

$(b).on('show.bs.collapse', function(){
  ...
})

你有：

$(b).on('shown.bs.collapse', function(){
  ...
})

多个bootstrap崩溃div上的映射

1 个答案: