此处地图按钮在地图下方可见，无法使用 Angular 将地图高度设置为 100%

Question

创建地图并显示出来后，发生了一些奇怪的事情，即地图按钮 "Zoom rectangular, map settings and the scale bar" 在地图下方显示为大图标我在设置地图宽度时遇到了问题如果我将地图高度（以像素为单位）设置为 100%，则地图工作完美，否则它仅在我调整 chrome 页面大小时可见。

我尝试设置不同的默认图层类型，例如普通地图和卫星地图关于宽度和高度问题，我尝试将其固定为不同的高度，并且效果很好，但是一旦我将其设置为 100%，地图就会消失，我可以看到大地图按钮 "zoom rectangular, scale bar and map settings"

public ngAfterViewInit() {
    let defaultLayers = this.platform.createDefaultLayers();
    defaultLayers.normal.map.setMin(5);

    this.map = new H.Map(
      document.getElementById("mapId"),
      defaultLayers.normal.map,
      {
        center: { lat: "0", lng: "0" }
      }
    );   
    this.ui = H.ui.UI.createDefault(this.map, defaultLayers);

    this.ui.getControl('mapsettings').setAlignment('top-left');
    this.ui.getControl('zoom').setAlignment('top-left');
    this.ui.getControl('scalebar').setAlignment('top-left');
  }

期望能在地图上看到自己的地图按钮，而不是在主地图下，还能将高度设置为 100%

Answer 1

您不能以百分比指定地图容器 (div) 的高度，因为它默认为零（'div' 根据其内容获取默认高度。所以空 'div' 的高度为零，因此地图不可见）。您可以将高度指定为 100vh，地图应垂直覆盖整个视口。

此处地图按钮在地图下方可见，无法使用 Angular 将地图高度设置为 100%

here map buttons is visible below the map and cannot set map height to 100% using Angular

maps

here-api

typescript

angular

here-maps-rest