HERE Map API页面加载不显示，仅调整窗口大小或点击按钮后正常显示求解

问题根因 #

你的问题是HERE地图初始化时，无法获取到#map容器的正确宽高，导致地图瓦片没有正常渲染，只有当窗口大小变化触发地图内置的重绘逻辑时才会正常显示。另外你提供的代码存在语法错误也可能影响执行。

修复步骤 #

• 首先修正代码中的语法错误：loadMap函数定义末尾多了一个多余的右括号，删除即可。
• 完成地图实例初始化后，主动调用map.resize()方法，手动触发地图重绘逻辑。
• 若仍存在偶发不渲染的情况，可将地图初始化的执行时机从jQuery的DOM就绪回调调整为window.load事件触发后，确保页面样式完全渲染、容器尺寸计算完成后再初始化地图。

修正后的完整代码 #

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

$(function() {
    let platform = new H.service.Platform({
        'apikey': api_key
    });

    loadMap ({
        lat: <?php echo round($obj->getLatitude(), 4); ?>,
        lng: <?php echo round($obj->getLongitude(), 4); ?>
    });

    function loadMap (position) {
        let defaultLayers = platform.createDefaultLayers();

        let map = new H.Map(
            document.getElementById('map'),
            defaultLayers.vector.normal.map,
            {
                zoom: 16,
                center: position,
            }
        );
        // 新增代码：手动触发地图重绘
        map.resize();
    }
});

如果需要调整执行时机，可以改成：

// 替换原来的$(function() { ... }) 包裹逻辑
window.addEventListener('load', function() {
    let platform = new H.service.Platform({
        'apikey': api_key
    });
    loadMap ({
        lat: <?php echo round($obj->getLatitude(), 4); ?>,
        lng: <?php echo round($obj->getLongitude(), 4); ?>
    });
    function loadMap (position) {
        let defaultLayers = platform.createDefaultLayers();
        let map = new H.Map(
            document.getElementById('map'),
            defaultLayers.vector.normal.map,
            {
                zoom: 16,
                center: position,
            }
        );
        map.resize();
    }
})

内容的提问来源于stack exchange，提问作者linuxoid