带有多个谷歌地图的引导轮播无法正常工作

Question

我在 Bootstrap 轮播中有几张 Google 地图作为幻灯片。问题是只有初始活动的地图才能正常工作。所有其他的都行不通。

我搜索了类似的问题，人们似乎建议使用函数来调整页面大小。但我对 Javascript 真的很陌生，不知道这对我的多张地图有什么作用。我已经尝试了很多，但它总是坏掉。真的需要帮助。

我该怎么办？我实际上有更多幻灯片，但我认为可能太多，无法放上来。

我的部分 html 在这里：

<div class="carousel" id="intro">

          <ol class="carousel-indicators">
              <li data-target="#intro" data-slide-to="0" class="active"></li>
              <li data-target="#intro" data-slide-to="1"></li>
              <li data-target="#intro" data-slide-to="2"></li>
          </ol>



          <div class="carousel-inner">
              <div class="item active">
                  <div class="carousel-content">
                      <div class="carousel-caption">
                          <h2>Spring Dawn at Su Causeway</h2>
                          <img src="img/su.jpg" />
                          <p>Su Shi, an outspoken official as well as a renowned painter, poet and art theorist, was made prefect of Hangzhou in 1089 during the Northern Song Dynasty. By that time, West Lake had shrunken to half its previous size due to increased land usage around the lake and was choked with weeds.</p>

                          <div id="sudi"></div>
                      </div>
                  </div>

              </div>

              <div class="item">
                  <div class="carousel-content">
                      <div class="carousel-caption">
                          <h2>Lotus in the Breeze at Crooked Courtyard</h2>
                          <img src="img/qu.jpg" />
                          <p>The imperial family of the Southern Song Dynasty kept their imperial brewery, Quyuan, close to the banks of West Lake in their capital city, Hangzhou. When the gentle summer breeze blew through lotuses kept in the lake near the brewery, it mixed with the smells of alcohol and was said to make even those not drinking feel intoxicated.</p>
                         <div id="quyuan"></div> 
                      </div>                 
                  </div>
              </div>

              <div class="item">
                  <div class="carousel-content">
                      <div class="carousel-caption">
                          <h2>Melting Snow on Broken Bridge</h2>
                          <img src="img/duan.jpg" />
                          <P>In keeping with the seasonal theme, Lingering Snow on Broken Bridge takes in the view from the arched Broken Bridge, located at the eastern end of the Bai Causeway, the day after snow has fallen. To the northwest, the view takes in the snow-covered buildings and hill at Gu Shan while the rest of the lake stretches out in black contrast to the south, with the snowy white hills around it.</P>
                          <div id="duanqiao"></div>
                      </div>
                  </div>
              </div>
      </div><!-- carousel-inner -->

      </div>

我的谷歌地图相关代码在这里：

function initMap() {

    var mapOptions = {
      sudi: {
        center: {lat: 25.7823072, lng: -80.3011205},
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // SATELLITE
        mapTypeControl: false
      },
      quyuan: {
        center: {lat: 26.1410956, lng: -80.2200135},
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
      },
      duanqiao: {
        center: {lat: 25.7823072, lng: -80.3011205},
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // SATELLITE
        mapTypeControl: false
      },

    }

    var sudiMap = new google.maps.Map(document.getElementById("sudi"), mapOptions.sudi);
    var quyuanMap = new google.maps.Map(document.getElementById("quyuan"), mapOptions.quyuan);
    var duanqiaoMap = new google.maps.Map(document.getElementById("duanqiao"), mapOptions.duanqiao);
    };

Answer 1

由于在您初始化它们各自的地图时，所有其他幻灯片都不可见，因此谷歌地图实例无法获得正确的高度和宽度，因此无法正确初始化。您需要在地图实例可见时触发调整大小。您可以通过侦听slid.bs.carousel 事件然后在相应的地图实例上触发resize 事件来做到这一点。要获得正确的地图实例，您需要以某种方式在幻灯片项目中创建对它的引用。这样做的一个好方法是将地图存储在带有键的对象中，并将键存储在相应幻灯片的数据属性中。

这里是html标记，注意data-map属性：

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active" data-map="foo">
            <div id="foo" class="map"></div>
            <div class="carousel-caption">
            ...
            </div>
        </div>
        <div class="item" data-map="bar">
            <div id="bar" class="map"></div>
            <div class="carousel-caption">
            ...
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

用对应的键在对象中创建映射：

var maps = {
    foo: new google.maps.Map(document.getElementById('foo'), {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }),
    bar: new google.maps.Map(document.getElementById('bar'), {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    })
};

现在您可以为slid.bs.carousel 事件添加监听器：

$('#carousel').on('slid.bs.carousel', function (e) {
    // Fetch map from maps object by key from element's data attribute
    var map = maps[e.relatedTarget.dataset.map];
    // Trigger the resize
    google.maps.event.trigger(map, 'resize');
});

Plunker 示例：http://plnkr.co/edit/ROheU2vcGrreAMu3JbAV?p=preview