Ionic5 agm/core：信息窗口 [isOpen] 错误：无法读取 agm-core.js 中未定义的属性“then”

Question

我在应用程序地图信息窗口初始化时遇到错误。 我希望应用程序加载地图并自动显示标记信息，而无需用户点击标记。

我正在使用 agm/core@^1.0.0

这是我显示信息窗口的代码。

<agm-map
                [latitude]="latitude"
                [longitude]="longitude"
                [zoom]="zoom"
                (mapClick)="onSetMarker($event)"
                [streetViewControl]="false"
                [disableDefaultUI]="false"
                [zoomControl]="false">

            <agm-marker
                    [latitude]="latitude"
                    [longitude]="longitude"
                    [markerDraggable]="true"
                    [animation]="'BOUNCE'"
                    [markerClickable]="true"
                    (dragEnd)="markerDragEnd($event)"
                    [openInfoWindow]="true"
                    [iconUrl]="iconUrl"
                    class="mapMarker">
                <agm-info-window [isOpen]="true">
                    <strong>
                        {{address}}
                    </strong>
                </agm-info-window>
            </agm-marker>
        </agm-map>

这是我在应用程序加载但无法显示信息窗口时遇到的错误。

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
    at VM225815 vendor.js:1363
    at ZoneDelegate.invoke (VM225810 polyfills.js:3470)
    at Object.onInvoke (VM225815 vendor.js:69538)
    at ZoneDelegate.invoke (VM225810 polyfills.js:3469)
    at Zone.run (VM225810 polyfills.js:3229)
    at VM225810 polyfills.js:3963
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3505)
    at Object.onInvokeTask (VM225815 vendor.js:69526)
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3504)
    at Zone.runTask (VM225810 polyfills.js:3273)
    at resolvePromise (VM225810 polyfills.js:3904)
    at VM225810 polyfills.js:3970
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3505)
    at Object.onInvokeTask (VM225815 vendor.js:69526)
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3504)
    at Zone.runTask (VM225810 polyfills.js:3273)
    at drainMicroTaskQueue (VM225810 polyfills.js:3675)

当我点击突出显示的文件链接时，我会在下面看到这段代码。

open(infoWindow) {
                return this._infoWindows.get(infoWindow).then((w)=>{
                    if (infoWindow.hostMarker != null) {
                        return this._markerManager.getNativeMarker(infoWindow.hostMarker).then((marker)=>{
                            return this._mapsWrapper.getNativeMap().then((map)=>w.open(map, marker));
                        }
                        );
                    }
                    return this._mapsWrapper.getNativeMap().then((map)=>w.open(map));
                }
                );
            }

Answer 1

您收到该错误是因为您没有将您的承诺返回给调用函数。而且由于您没有提供 .ts 文件而仅提供 .html 文件，因此我们只能说这么多。但是请看下面没有错误的示例供您参考：

https://stackblitz.com/edit/angular-agm-63947796

app.component.html

<agm-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [streetViewControl]="false"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)">

  <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">
      
    <agm-info-window [isOpen]="true">
      <strong>{{m.address}}</strong>
    </agm-info-window>
  </agm-marker>
</agm-map>

app.component.ts

import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // google maps zoom level
  zoom: number = 8;
  
  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }
  
  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true,
      address:"dynamic address logic here (i.e. Geocoding API)"
    });
  }
  
  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }
  
  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'A',
          draggable: true,
      address:"address 1"
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'B',
          draggable: false,
      address:"address 2"
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'C',
          draggable: true,
      address:"address 3"
      }
  ]
}

// just an interface for type safety.
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
  address:string;
}