Bootstrap轮播中谷歌地图的奇怪渲染答案

【问题标题】：Weird rendering of google maps inside Bootstrap carouselBootstrap轮播中谷歌地图的奇怪渲染
【发布时间】：2013-12-26 21:17:45
【问题描述】：

我正在尝试将谷歌地图方向加载为 Bootstrap 轮播中的一张幻灯片。

不太清楚为什么这张地图会以现在的方式加载。如果我删除轮播中的第一项，则地图加载正常。只有当地图是第二个项目时，它才会奇怪地加载。

任何想法如何解决这个问题并正确加载地图？

http://jsfiddle.net/ax9jF/4/

HTML：

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

  <div class="carousel-inner">
      <div class="item active" style="height: 450px; width: 100%;">
          ABC
      </div>
      <div class="item">
          <div id="map-canvas" style="height: 450px; width: 100%;">
          </div>
      </div>
  </div>

    <!-- Carousel Controls -->
  <a class="left carousel-control" href="#carousel-1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Javascript

$(document).ready(function(){
var $canvas = $('#map-canvas');
var dstLatLng = new google.maps.LatLng(37.403867, -121.975405);
var orgLatLng = new google.maps.LatLng(37.4321365, -122.0988141);
var directionsRenderer = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var request = {
                origin: orgLatLng,
                destination: dstLatLng,
                travelMode: google.maps.TravelMode.DRIVING
              };
var mapOptions = {
                zoom: 8,
                center: dstLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
var map = new google.maps.Map($canvas[0], mapOptions);
directionsRenderer.setMap(map);
directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      return directionsRenderer.setDirections(result);
    }
});
$('.carousel').carousel();

})

【问题讨论】：

标签： google-maps-api-3 twitter-bootstrap-3

【解决方案1】：

这实际上与google-maps inside tabs. The solution 相同的问题是off-left 技术，即使用display: none 隐藏地图，您可以通过添加以下类来隐藏：

.off-left_hide {
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

接下来的挑战是说服您的图书馆使用这种方式而不是经典的hide()。例如，在 jQueryUI 1.10+（可能甚至更旧的版本）中，它们不再使用类进行隐藏，所以我不得不自己修补库。有一些"new solutions" of this problem that don't use the off-left technique（遗憾的是，新库越来越难），但这些解决方案通常不可靠并且会产生故障（在加载之前你会看到不完整的地图一段时间等）。 off-left 技术的效果要好得多，但在很多情况下，如果不修改您喜欢的 javascript 库，您就无法使用它。

【讨论】：