angular - 在 @angular/google-maps map 中打开 infoWindow 时出现问题

Question

我在尝试打开 infoWindow 时遇到问题在 @angular/google-maps控制( Angular/组件的一部分)。
我关注了 tutorial作为这个新功能的第一次用户。我的设置与教程中的设置略有不同。我只想设置一个标记和一个 infoWindow - 而不是一组标记。
我已经设置了一个像这样的谷歌地图控件:

      <google-map height="500px" width="100%" [zoom]="zoom" [center]="marker.position" [options]="options">
        <map-marker #markerElement [position]="marker.position" (mapClick)="openInfo(markerElement)">
          <map-info-window>MyContent</map-info-window>
        </map-marker>
        <!-- <map-info-window>MyContent</map-info-window> -->
      </google-map>

(您可以从上面注释掉的代码中看到，我已经尝试将 infoWindow 放置在标记的内部和外部。两者都没有解决问题，我不知道哪个最好......)
这是相关的组件 Typescript:

  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  marker;
  zoom = 8;
  options: google.maps.MapOptions = {
    mapTypeId: 'terrain'
  }

  openInfo(marker: MapMarker) {
    console.log(marker);
    console.log(marker.position);
    this.infoWindow.open(marker);
  }

  addMarker() {
    this.marker = ({
      position: {
        lat: this.observation.locationLatitude,
        lng: this.observation.locationLongitude
      },
      label: {
        color: 'red',
        text: 'Marker label',
      },
      title: 'Marker title',
      options: { animation: google.maps.Animation.BOUNCE },
    })
  }

openInfo(marker: MapMarker)我认为方法是最相关的位。 (mapClick)="openInfo(markerElement)"事件是从 map 控件正确发送的。它在控制台中登录“标记”对象。但是，它会引发错误而不是打开 infoWindow。
错误是:

在 this.infoWindow.open(marker); 上引发错误('anchor.getAnchor 不是函数')方法。我也试过没有这样的论点: this.infoWindow.open(); .
API 文档是 here ，我附上了相关部分的截图:

我只是无法锻炼如何让它发挥作用。我可能会错过树林中的树林，但有人能指出我正确的方向吗？

Answer 1

k 让它工作。免责声明 - 需要清洁
官方文档: https://github.com/angular/components/tree/master/src/google-maps
1. 我创建了一个服务来让我的浏览器 loc 注入(inject)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BrowserLocationService {

  constructor() { }

  public getPosition(): Promise<any> {
    return new Promise((resolve, reject) => {

      navigator.geolocation.getCurrentPosition(resp => {

          resolve({lng: resp.coords.longitude, lat: resp.coords.latitude});
        },
        err => {
          reject(err);
        });
    });

  }
}

休息只是简单地遵循这个和一些命名 foo
https://github.com/angular/components/blob/master/src/google-maps/map-info-window/README.md
2.组件

import { Component, ViewChild } from '@angular/core';
import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';
import { BrowserLocationService } from './browser-location.service';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow;
  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  browserLatLng: any = null;
  defaultMarker: any = null;
  zoom = 8;
  options: google.maps.MapOptions = {mapTypeId: 'terrain'};

  constructor(private locSvc: BrowserLocationService) {
    this.locSvc.getPosition().then(
      loc =>  {
        console.log(this.browserLatLng);
        this.browserLatLng = loc;
        this.addDefaultMarker();
      });
  }

  openInfo(marker: MapMarker) {
    this.infoWindow.open(marker);
  }

  addDefaultMarker() {
    this.defaultMarker = ({
      position: {
        lat: this.browserLatLng.lat,
        lng: this.browserLatLng.lng
      },
      label: {
        color: 'red',
        text: 'Marker label',
      },
      title: 'Marker title',
      options: { animation: google.maps.Animation.BOUNCE },
    });
  }
}

3. HTML

<google-map height="500px" width="100%" [zoom]="zoom" [center]="defaultMarker?.position" [options]="options">
  <map-marker *ngIf="defaultMarker != null" #marker="mapMarker" [position]="defaultMarker?.position" (mapClick)="openInfo(marker)">
  </map-marker>
  <map-info-window>MyContent</map-info-window>
</google-map>

#marker="mapMarker"与它有关