如果从一开始不可见，这里的地图将不会显示

Question

我尝试在我的网络应用程序中包含 Here Maps。地图应在用户单击 button/link 以展开 bootstrap 可折叠面板后显示。

如果我将包含地图的 div 放在可折叠面板之外，它就可以正常工作。

我在 jsfiddle 中的代码 https://jsfiddle.net/Lymbzfx2/

我的HTML

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <div id="map" class="chart"></div> <!-- Map should be here -->
  </div>
</div>

我的JS代码

var platform = new H.service.Platform({
    'app_id': '{App_ID}',
    'app_code': '{APP_Code}'
});

  // Obtain the default map types from the platform object:   
var defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
  document.getElementById('map'),
  defaultLayers.normal.map, {
    zoom: 10,
    center: {
      lat: 52.5,
      lng: 13.4
    }
});

我希望在单击 "Link with href" link 后显示地图。但是，显示了 Here Maps 中的一些 SVG，并且没有加载地图图块

编辑：添加了当前状态的屏幕截图 https://i.imgur.com/6WuV4gm.png（post 图片缺少声誉）

Answer 1

HERE 地图 canvas 动态获取其父地图 div 的宽度和高度（在本例中：<div id="map" class="chart"></div>）。

因此，首先您必须将 width 和 height 添加到地图 div，如下所示：

<div id="map" style="width:100%; height:400px" class="chart"></div>。

其次，您应该注意 Bootstrap 可折叠元素中的子元素在折叠时 (display: none) 的宽度和高度将为零，而在展开时它们的实际值 (display: block).

所以HERE地图应该在可折叠元素展开时绘制（这样地图可以有非零的宽度和高度）。您可以使用 JQuery 检查您的 button/link 是否被点击并且 'map' div 是否可见。

如果从一开始不可见，这里的地图将不会显示

Here maps won't display if not visible from start

here-api

bootstrap-4