HERE地图在外部系统中是空白的

Question

我正在尝试在 OutSystems 工具上使用 HERE 地图实现 Web 应用程序。

在应用程序上我有一个 web 块，其中包含一个容器（将在其中绘制地图）、一个表达式（转义内容为 'no'，以及下面的脚本作为值，因此可以插入在页面的 html 上）和一个尝试再次运行相同脚本的按钮（只是为了测试措施，看看它是否是在 div 之前执行的脚本的问题准备好了）。

<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
  type="text/javascript" charset="utf-8"></script>
<script type ="text/javascript">
    // Initialize the platform object:
    var platform = new H.service.Platform({
        'app_id': '{APP_KEY}',
        'app_code': '{APP_CODE}'
    });

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

    // Instantiate (and display) a map object:
    var map = new H.Map(
        document.getElementById('" + MapContainer.Id + "'),
        maptypes.normal.map,
    );

    map.setBaseLayer(maptypes.satellite.traffic);
</script>

(MapContainer.Id returns 容器的 id，如 HTML，因为该工具会自动创建元素的 id)

在下图中：

你可以在网页版块看到我使用的结构：

问题是：我正在使用的这段代码在 OutSystems 上不起作用，留下一个空白屏幕网页：

但是 HTML 文件中的相同代码工作正常。浏览器控制台上没有列出任何错误，在使用开发工具 (Chrome) 检查代码时，我注意到正在创建 canvas 但有 height = 0 （编辑此值没有任何改变）。

如果有人知道解决这些问题的方法，我很想听听。感谢您的关注。

Answer 1

在实例化地图时，似乎还没有计算和渲染地图容器的样式。因此，地图在那里，但高度为零像素。这可能与Outsystems如何创建视图有关。

请求浏览器在下一动画帧调整地图大小应该有所帮助：

requestAnimationFrame( () => map.getViewPort().resize() );

HERE地图在外部系统中是空白的

HERE map is blank in outsystems

outsystems

here-api

heremaps