如何在容器调整大小时重新绘制Here Map

Question

我今天遇到了一个以前从未遇到或注意到的特殊问题。在Here Maps 3.0中设置地图时，我注意到，在加载地图时，如果浏览器窗口"小"，小于全屏窗口，那么即使浏览器窗口调整为全屏窗口，地图也会保持小。

如何更新Here Maps地图大小以占用分配的空间？

我的安排如下，我想知道这是否是因为相对的div s。我之所以有它们，是因为我正在尝试有页眉、页脚和其他带有和不带滚动条的文本的设计（如果页面上有滚动条，滚动地图看起来会有点不稳定）。

<style type="text/css">
    #mapContainer {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background: grey;
    }
    #main {
         position: relative;
         width: 100%;
         height: 100%;
    }
    html, body {
        overflow-y: hidden;
    }    
</style>
<div id="main">
    <div id="mapContainer"></div>
</div>

Answer 1

在映射对象初始化后尝试此操作：

window.addEventListener('resize', function () {
    map.getViewPort().resize(); 
});

这应该能解决问题。

Answer 2

支持提到的窗口调整事件似乎是主要的方法。但是，在模板化页面中，窗口调整大小事件有时发生得太快，resize（）调用的大小尚未正确-此时，您可能需要为模板库找到一个"AfterRender"事件，否则，请从调整大小事件设置超时，以使元素调整大小有机会完成。