Question

我正在学习bootstrap，我尝试使用基于this example from HERE

的HERE地图

我意识到，为了能够使用相对高度（例如身高：50％），我必须制作类似的css样式：

html, body {
  height: 100%;
  width: 100%;
}

#map {
  width:100%;
  height: 100%;
  margin:0 auto;
}

现在我想用bootstrap创建两列，左边是行程，右边是地图视图。

<div class="container">
<div class="row">
  <div class="col-sm-4">
    Here comes the itinerary
  </div>
  <div class="col-sm-8" id="map">
  </div>
</div>

我很快意识到，我必须对地图元素使用绝对大小（例如宽度：400px），否则根本不显示地图（使用高度：100％;）或者列从头开始堆叠（使用宽度：100％;）

我怀疑，其原因在于父元素（行，容器）的宽度/高度样式，但我不知道正确的解决方案。

我也知道，在获得正确的样式后，我需要注意在窗口调整大小时自动调整地图大小，但我想先得到正确的样式。

Answer 1

来自HERE支持的先前回复 “在地图对象初始化之后尝试以下操作：

window.addEventListener（'resize'，function（）{ map.getViewPort（）。resize（）; }）; 那应该解决问题。 How to redraw Here Map when container resizes?”

使用HERE地图和引导程序实现响应式设计

1 个答案: