jquery - 在 Bootstrap Carousel 中嵌入 Google map

Question

我有一个响应式设计，其中在每个 Bootstrap 轮播幻灯片中插入了多个 map 。

使用最新的 Google map API，一些 map 看起来缩小到可怕的南极

经过一些研究后，我发现选项卡也存在类似问题，因为隐藏了内容。但是我无法获得任何建议的响应来处理我的元素。

我试过的最后一个代码是

$(document).ready(function() {
    $('#carousel-example-generic').on('slide.bs.carousel', function () {
        google.maps.event.trigger(map, 'resize');
    })
});

但我收到错误“Uncaught ReferenceError: google is not defined”

map 存储在我的数据库中并使用 API 输出的代码嵌入

示例:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1961.5104998775728!2d-66.88076565031373!3d10.499010518599084!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xfdd50a9e95ba1b19!2sEnoba+Sistemas!5e0!3m2!1ses-419!2sve!4v1415992894629!zoom=18" width="1350" height="400" frameborder="0" style="border:0"></iframe>

我现在卡住了

Answer 1

使用 Google Map iframe 执行此操作的一种方法是使用 jquery.livequery ( https://github.com/hazzik/livequery ) 检查它是否可见，如果不可见则重新加载源。

演示:https://jsbin.com/guzada/1/

$(document).ready(function() {
   // REQUIRES jquery.livequery
   $('.google-map iframe:visible').livequery(function() {
     var mapFrame = $(this);
     if (!$(mapFrame).hasClass('map-refreshed')) {
       mapFrame.attr('src', mapFrame.attr('src')+'');
       mapFrame.addClass('map-refreshed');
    }
});
  
});

HTML

  <div id="carousel-1" class="carousel slide">
     <div class="carousel-inner">
        <div class="item active">
           <div class="embed-responsive embed-responsive-16by9 google-map">
              <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed/v1/place?q=Eiffel%20Tower%2C%20Avenue%20Anatole%20France%2C%20Paris%2C%20France&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
           </div>
        </div>
        <div class="item">
           <div class="embed-responsive embed-responsive-16by9 google-map">
              <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed/v1/place?q=Trafalgar%20Square%2C%20London%2C%20United%20Kingdom&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
           </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>
     <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>
  <!--/.carousel-->