Question

我在Bootstrap轮播中有几张谷歌地图作为幻灯片。问题是只有初始活动的地图正常工作。所有其他人都没有工作。

我搜索过类似的问题，人们似乎建议使用功能调整页面大小。但我对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

由于在您初始化各自的地图时，所有其他幻灯片都不可见，因此Google地图实例无法获得正确的高度和宽度，因此无法正确初始化。当地图实例变得可见时，您需要在地图实例上触发调整大小。您可以通过侦听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

具有多个Google地图的Bootstrap轮播无法正常工作

1 个答案: