JavaScript 的地图始终在 Angular 13 中显示空白地图而没有错误

Question

我正在使用 Angular 13 构建一个应用程序。该应用程序有两张由 Here 提供支持的地图。每个地图都加载了不同的组件（基于用户会话，你不能同时看到两者）因为它们必须有一些特定的配置。

在其中一个组件中，一切正常，但在另一个组件中，由于某些未知原因，地图始终是空白的，只显示徽标及其使用条款：

我在 JS 控制台中没有错误或警告。

失败的组件有一个简单的代码来加载基本地图：

dmap-here.component.html:

<div #map id="map"></div>

dmap-here.component.css:

#map {
  width: 300px;
  height: 300px;
}

dmap-here.component.ts:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
//This contains my API KEY
import { GlobalConstants } from 'src/app/common/global-constants';

declare var H: any;

@Component({
  selector: 'app-dmap-here',
  templateUrl: './dmap-here.component.html',
  styleUrls: ['./dmap-here.component.css']
})
export class DMapHereComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  private map?: any;

  @ViewChild('map') mapDiv?: ElementRef;

  ngAfterViewInit(): void {
      // instantiate a platform, default layers and a map as usual
      const platform = new H.service.Platform({
        apikey: GlobalConstants.hereKey
      });
      const layers = platform.createDefaultLayers();
      const map = new H.Map(
        this.mapDiv!.nativeElement,
        layers.vector.normal.map,
        {
          pixelRatio: window.devicePixelRatio,
          center: {lat: 0, lng: 0},
          zoom: 2,
        },
      );
      this.map = map;
  }
}

奇怪的是另一个组件正确显示了地图（正如我之前分享的），而且代码要复杂得多：

我完全不知道我在失败的组件中做错了什么，因为首先我只是想显示地图，如果一切正常，那么我将添加额外的必需配置。

知道为什么我得到的是空白地图吗？

更新 1：

我按照评论中的建议检查了网络选项卡，没有什么特别之处。与 Here Maps 相关的所有案例 returns，状态代码：200：

更新 2：

我在定价部分看不到有两个带地图控件的组件有任何限制：

https://www.here.com/pricing

更新 3：

有一个相对较旧的教程表明改编后的代码应该显示一些东西： https://developer.here.com/documentation/maps/3.1.30.9/dev_guide/topics/angular-practices.html

唯一不同的是这一节：

import H from '@here/maps-api-for-javascript';

因为我使用：

declare var H: any;

这背后的原因是我之前查看了另一个教程：

https://developer.here.com/blog/display-here-maps-angular-web-application

第一个选项给了我奇怪的错误，但它仍然在其中一种情况下正确加载。

Answer 1

我能够修复它。不小心调整了浏览器的大小，无意中找到了解决办法。出于任何不常见的原因，您应该在一段时间后使用 ngAfterViewInit() 事件中的一些代码触发调整大小事件：

setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
}, 500);

并在调整大小事件中添加此部分：

@HostListener('window:resize', ['$event'])
onResize(event: any) {
    requestAnimationFrame(() => this.map.getViewPort().resize());
}

在此之后，一切都按预期工作：

JavaScript 的地图始终在 Angular 13 中显示空白地图而没有错误

Here Maps for JavaScript is always displaying a blank map in Angular 13 without errors

javascript

angular

here-api

heremaps