Question

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

这是我的.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>

Answer 1

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

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

1 个答案: