Question

我正在构建一个wordpress网站（此处：http://dev.tps.entropii.com/contact-us/），该网站需要在联系页面上显示整页宽度的Google地图。 Business有两个地址，因此它们实际上需要两个地图，并且可以在它们之间切换。我正在使用高级自定义字段插件为用户提供更新/编辑其地址的功能。

这是问题所在。为了提供在两张地图之间来回切换的功能，我决定把它们放在一个twitter bootstrap轮播中。每张地图一张幻灯片。这有效地解决了一个问题。非活动幻灯片中包含的地图（例如，页面加载时没有“活动”类的幻灯片）似乎没有完全加载。如果我将地图并排放在没有轮播的页面上，他们就没有问题。

因为我正在使用高级自定义字段，所以使用php加载地图。这是我的模板文件中的HTML / php：

`

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
    <!-- map 1 -->
    <?php $map1 = get_field('map_1'); if( !empty($map1) ): ?>
        <div class="acf-map" id="map1">
            <div class="marker" data-lat="<?php echo $map1['lat']; ?>" data-lng="<?php echo $map1['lng']; ?>"></div>
        </div>
   <?php endif; ?>
   </div>

    <div class="item">
    <!-- map 2 -->
    <?php $map2 = get_field('map_2'); if( !empty($map2) ): ?>
        <div class="acf-map" id="map2">
           <div class="marker" data-lat="<?php echo $map2['lat']; ?>" data-lng="<?php echo $map2['lng']; ?>"></div>
    </div>
    <?php endif; ?>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#map-carousel" data-slide="prev"></a>
  <a class="right carousel-control" href="#map-carousel" data-slide="next"></a>
</div>`

我怀疑是因为bootstrap carousel的非活动幻灯片设置为none，所以内容没有被正确加载。然而，我在黑暗中完全被刺伤。任何人都可以对此有所了解吗？

如果你了解更多信息，请告诉我。谢谢，

Bootstrap Carousel和Google Maps以及高级自定义字段

0 个答案: