Google Map Angular9 错误，打开信息 window，找不到 getAnchor()

Question

我正在使用这个 google map angular component 教程，效果非常好！但是打开信息 window 抛出异常。

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

叫它进

google-maps.js // line 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
}

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

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

这是我查看 'marker' 时在调试控制台中显示的内容，因此它具有值并被实例化！

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

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

Answer 1

找到答案。

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

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>

Google Map Angular9 错误，打开信息 window，找不到 getAnchor()

Google Map Angular9 error with opening info window, getAnchor() is not found

javascript

google-maps

google-maps-api-3

angular