无法在 MapComponent.ngOnInit 读取未定义的属性（读取“nativeElement”）

Question

我正在使用 bing 地图（npm angular-maps 包）在用户输入位置后显示地图我从 MapQuest 获取经纬度并正确获得此响应但是每当我尝试显示地图时它都会显示错误
我是以下链接作为参考
https://stackblitz.com/edit/bing-basic-map-with-single-marker-hprtgv?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp %2Fapp.component.ts

  <x-map #xmap [Options]="_options" [Box]="_box" *ngIf="lng != 0 && lat != 0">
    <x-map-marker
      [Latitude]="lat"
      [Longitude]="lng"
      [Title]="'My Marker'"
      [IconInfo]="_iconInfo"
    >
    </x-map-marker>
  </x-map>

这是在.ts文件中定义的

 _markerTypeId = MarkerTypeId;
  _options: IMapOptions = {
    disableBirdseye: false,
    disableStreetside: false,
    navigationBarMode: 1,
    zoom: 6,
  };

  _box: IBox = {
    maxLatitude: this.lat + 47,
    maxLongitude: this.lng + 47,
    minLatitude: this.lat - 38,
    minLongitude: this.lng - 38,
  };

  _iconInfo: IMarkerIconInfo = {
    markerType: MarkerTypeId.FontMarker,
    fontName: 'FontAwesome',
    fontSize: 48,
    color: 'red',
    markerOffsetRatio: { x: 0.5, y: 1 },
    text: '\uF276',
  };

Lng 和 lat 是我存储经度和纬度的变量。

我尝试按照 chatgpt 的建议删除 ngIf，但没有成功。 x-map 标签没有被初始化，因为我试图显示一些没有被渲染的数据

Answer 1

看起来问题可能与未正确设置或未正确更新 lat 和 lng 变量有关。由于您提到您正在从 MapQuest 正确获取纬度和经度，因此可能值得检查这些值是否正确分配给了 lat 和 lng 变量。

Try 是将 lat 和 lng 的值打印到控制台，看看它们是否被设置为正确的值。您还可以尝试对 lat 和 lng 的一些值进行硬编码，以查看地图是否使用这些值正确呈现。

要检查的另一件事是 x-map 组件是否正确初始化。一种检查方法是在模板中添加一些调试信息，例如：

    <x-map #xmap [Options]="_options" [Box]="_box">
  <div *ngIf="!xmap.initialized">Map not initialized yet</div>
  <x-map-marker
    [Latitude]="lat"
    [Longitude]="lng"
    [Title]="'My Marker'"
    [IconInfo]="_iconInfo"
  >
  </x-map-marker>
</x-map>

如果这些方法都不起作用，那么您可以查看 angular-maps 包的文档或联系包维护者以获得支持。