0

我正在使用 Angular 7 和 Google Maps (agm) 构建一个网站，并且我想向location组件添加一个地图。但是，当我添加import { MapsAPILoader } from '@agm/core';到我的location.component.ts文件时，我得到了多个编译错误，这些错误似乎来自 agm 本身：

ERROR in node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts(50,41): error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts(50,94): error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts(25,93): error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts(25,129): error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.

代码在没有上述导入语句的情况下成功编译，但是，当然，网站不起作用，我不能使用 agm :)

有谁知道如何解决这个问题？

提前致谢！

我的location.component.ts代码：

/// <reference types="@types/googlemaps" />
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
import {} from 'googlemaps';
import { MapsAPILoader } from '@agm/core'; // <- This causes the problem

@Component({
  selector: 'location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
  
 @ViewChild('map') mapElement: any;
 map: google.maps.Map;

  constructor(private route: ActivatedRoute, private mapsAPILoader: MapsAPILoader) { }
  

  ngOnInit() {
      this.route.queryParams.subscribe(params => {
         console.log("carNumber in queryParams= " + params["carNumber"]); 
      });
      
      this.mapsAPILoader.load().then(() => {
        const mapProperties = {
          center: new google.maps.LatLng(35.2271, -80.8431),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);
      });
  }
}

我的location.component.html：

<div #map style="width:100%;height:400px">
    <script src="http://maps.googleapis.com/maps/api/js?key=apikeyaddedhere"></script>
</div>
4

0 回答 0