OpenLayers 地图未显示在 Bootstrap Carousel 上

问题描述

我有一个搜索结果屏幕，每页显示 10 个结果（世界上的位置）。如果结果中有可用的图像，则会显示该图像，否则会显示 OpenLayers 地图上的位置。

我只是尝试使用 Bootstrap carousel 升级此页面，以允许用户在地图和图像（如果可用）之间循环。

我使用 2 个测试图像使轮播工作正常。然而，当我换入OL地图时，虽然图像/照片显示正常，但当您循环到下一个项目（地图）时，地图只显示白屏/没有显示。

代码如下。（仅供参考，当我将其从轮播代码中拉出时，地图工作正常。

有什么想法吗？

很高兴分享 Ol.map 代码，尽管如前所述它在轮播之外运行正常，所以我认为这可能是某种格式/CSS 问题。


  <div class="carousel-inner">
    <div class="carousel-item active">
      <%= image_tag(@phototouse,class:"map img-responsive",style:"display:block;height: 100%;max-height:350px") %>
    </div>
    <div class="carousel-item">
      <div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">PrevIoUs</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

更新：

我以为我已经通过添加 updateSize 事件（如下）来完成这项工作，但奇怪的是，地图仅在我调整窗口大小时才显示。如果我不触摸窗口，地图就不会显示，我会收到以下 java 错误：'map1.updateSize is not a function'。

有什么想法吗？

<div class="container-fluid normaltextblack"  style="background-color: #F3F3F3;">

  <div class="row" style="height:350px">

    <div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">

      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
          </div>
          <div class="carousel-item">
            <div id="testmap" class="map img-responsive" style="height:350px"></div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"  onclick="resizemap();">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">PrevIoUs</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"  onclick="resizemap();">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </div>
  </div>
</div>

<script>
            
  function resizemap() {

      setTimeout(function(){ 
        
        var map1 = document.getElementById("testmap");
      map1.updateSize();

      },1000); 

  }
            
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4 openlayers ruby-on-rails