google-maps-api-3 - Bootstrap轮播中谷歌地图的奇怪渲染

Question

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

不太确定为什么这张 map 会按原样加载。如果我删除轮播中的第一项，则 map 加载正常。只有本地图是第二个项目时，它才会奇怪地加载。

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

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();

})

Answer 1

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

.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 (遗憾的是，因为使用新库变得越来越困难)，但这些解决方案通常不可靠并且会产生故障(您会在加载之前看到不完整的 map 一段时间等)。 off-left 技术的效果要好得多，但是在很多时候你不能在不修改你最喜欢的 javascript 库的情况下使用它。