我应该在我的 .ts 代码中添加什么以使 agm-info-window 工作？答案

【问题标题】：What should I add to my .ts code to make agm-info-window work?我应该在我的 .ts 代码中添加什么以使 agm-info-window 工作？
【发布时间】：2019-06-20 21:08:59
【问题描述】：

我正在尝试为地图上的标记创建信息窗口。如果没有<agm-info-window>，应用程序仍然可以正常工作，但添加它之后，甚至地图都不会显示。下面是我试图使工作的代码，但显然有一些我遗漏或不理解的东西。不过，我似乎无法自己弄清楚细节，因为我是 Angular 新手。任何帮助将不胜感激。

这是我的 .ts 代码：

import { Observable, ReplaySubject, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { MarkerLabel, MouseEvent } from 'C:/Users/Dream Machines/a-pir/node_modules/map-types';
import { FitBoundsAccessor, FitBoundsDetails } from '@agm/core/services/fit-bounds';
import * as mapTypes from '@agm/core/services/google-maps-types';
import { MarkerManager } from '@agm/core/services/managers/marker-manager';
import { InfoWindowManager } from '@agm/core/services/managers/info-window-manager';


declare var google: any;

interface Marker {
  lat: number;
  lng: number;
  value: number;
  iconUrl: string;
}

interface Location {
  lat: number;
  lng: number;
  viewport?: Object;
  zoom: number;
  marker?: Marker;
}

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  geocoder: any;
  public location: Location = {
    lat: 52.222549,
    lng: 21.004424,
    marker: {
      lat: 52.202737,
      lng: 21.001095,
      value: 11,
      iconUrl: "http://labs.google.com/ridefinder/images/mm_20_orange.png "
    },
    zoom: 13
  };

  @ViewChild(AgmMap) map: AgmMap;

  constructor(public mapsApiLoader: MapsAPILoader,
    _infoWindowManager: InfoWindowManager,
    private zone: NgZone,
    private wrapper: GoogleMapsAPIWrapper) {
    this.mapsApiLoader = mapsApiLoader;
    this.zone = zone;
    this.wrapper = wrapper;
    this.mapsApiLoader.load().then(() => {
     this.geocoder = new google.maps.Geocoder();
    });
  }


  ngOnInit() {

  }
}

和.html代码：

<agm-map [(latitude)]="location.lat" [(longitude)]="location.lng" [(zoom)]="location.zoom" [disableDefaultUI]="true" [zoomControl]="true" [(fitBounds)]='location.viewport'>
  <agm-marker [(latitude)]="location.marker.lat"
              [(longitude)]="location.marker.lng"
              [iconUrl] ="location.marker.iconUrl">
    <agm-info-window [disableAutoPan]="false">
      Its not working
    </agm-info-window>
  </agm-marker>

</agm-map>

【问题讨论】：

控制台中是否出现任何错误？它们是什么？

标签： angular infowindow angular-google-maps

【解决方案1】：

我应该补充： import { AgmInfoWindow } from '@agm/core/directives/info-window';

【讨论】：