Question

我正在尝试使用工具Outsystems上的HERE映射来实现Web应用程序。

在应用程序上，我有一个Web块，其中包含一个Container（将在其中绘制地图），一个表达式（Escape Content为'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如HTML一样返回容器的ID，因为该工具会自动创建元素的ID）

在image上，您可以在Web块上看到我正在使用的结构：

问题是：我正在使用的这段代码在外部系统上不起作用，留下了blank screen webpage 。但是，HTML文件上的相同代码也可以正常工作。在浏览器控制台上没有列出任何错误，并且在使用开发工具（Chrome）检查代码时，我注意到画布正在创建，但是高度为0（编辑此值不会更改任何内容）。

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

Answer 1

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

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

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

在外部系统中，此处的地图为空白

1 个答案: