时间戳

首页 > 解决方案 > 我应该在我的 .ts 代码中添加什么以使 agm-info-window 工作？

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

问题描述

我正在尝试为地图上的标记创建一个信息窗口。没有<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>

标签： angularinfowindowangular-google-maps

解决方案

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

推荐阅读