谷歌地图 Angular9 打开信息窗口时出错，找不到 getAnchor()

Question

我正在使用这个谷歌地图角度组件教程，它工作得很好！但是打开信息窗口会引发异常。

这是我的代码，它在 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);

   // in google-maps.js 

open(anchor) {

  this._assertInitialized();

  this._elementRef.nativeElement.style.display = '';

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

}

Answer 1

找到了答案。查看了 Github 上的 repo 和一个示例。它与我上面发布的链接中的教程不同。https://github.com/angular/components/tree/master/src/google-maps#readme地图标记需要有这个道具<map-marker&nbsp;&nbsp; #somemarker="mapMarker" // not #markerElem like from the link&nbsp; (mapClick)="openInfoWindow(somemarker, marker.info)"></map-marker>