打开信息窗口时出现 Google Map Angular9 错误，找不到 getAnchor()

Question

我正在使用这个google map angular component教程，它工作得很好！但是打开信息窗口会引发异常。

这是我的代码，它在 npm 包中的“MapInfoWindow”组件上调用“this.infoWindow.open”方法。

import {
  MapInfoWindow,
  MapMarker,
  GoogleMap
} from '@angular/google-maps';

export class YogabandEventsComponent implements OnInit {
  @ViewChild(MapInfoWindow, {
    static: false
  }) infoWindow: MapInfoWindow;
  @ViewChild(GoogleMap, {
    static: false
  }) googleMap: GoogleMap;


  openInfo(marker: MapMarker, content) {
    this.infoContent = content;
    this.infoWindow.open(marker);
  }
}

<google-map [options]="options" [zoom]="zoom" [center]="center" class="h-100" height="100%" width="100%">
  <map-marker #markerElem *ngFor="let marker of markers" (mapClick)="openInfo(markerElem, marker.info)" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options">
  </map-marker>
  <map-info-window>{{ infoContent }}</map-info-window>
</google-map>

什么时候

infoWindow.open（标记）

叫它进入

google-maps.js // 第 1122 行

但在第 1122 行收到错误，因为没有“getAnchor()”方法

this.infoWindow.open(this._googleMap.googleMap, anchor ? anchor.getAnchor() : undefined);

this.infoWindow.open(this._googleMap.googleMap, anchor ? anchor.getAnchor() : undefined);

我查看了谷歌文档，但没有看到任何“getAnchor”方法。

这是我在我的组件中设置断点时在调试器中看到的内容。

这是我查看“标记”时在调试控制台中显示的内容，因此它具有值并已实例化！

我可以复制和粘贴整个内容，但它很长。

这是调试控制台的另一张图片，在 google-maps.js 文件中，尝试调用 getAnchor() 没有运气，因为它不存在。

Answer 1

找到了答案。

查看了 Github 上的 repo 和一个示例。它与我上面发布的链接中的教程不同。

https://github.com/angular/components/tree/master/src/google-maps#readme

拥有此道具所需的地图标记

<map-marker 
  #somemarker="mapMarker" // not #markerElem like from the link
  (mapClick)="openInfoWindow(somemarker, marker.info)">
</map-marker>