Question

我想在我的Angular项目中使用谷歌地图。我使用AGM但是缺少lib选项来获取群集点击上所有标记的引用。所以我决定使用原生谷歌地图。

我安装了npm install @google/maps --save然后我需要输入，所以我使用了npm install @types/google-maps ---save。最后，由于我想从群集中获取所有标记，因此我安装了npm install markerclustererplus --save并输入了npm install --save @types/markerclustererplus。

我的代码

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import '@google/maps';

@Component({
  selector: 'app-google-map-native',
  templateUrl: './google-map-native.component.html',
  styleUrls: ['./google-map-native.component.scss']
})
export class GoogleMapNativeComponent implements OnInit {

  @ViewChild('googleMapContainer') googleMapContainer: ElementRef;

  constructor() {
  }

  ngOnInit() {
    const center = new google.maps.LatLng(37.4419, -122.1419);
    const options = {
      'zoom': 13,
      'center': center,
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
    const map: google.maps.Map = new google.maps.Map(this.googleMapContainer.nativeElement, options);

    console.log(map);
  }

}

html模板

<div #googleMapContainer fxFlexFill>

</div>

当我发布应用程序时，我收到错误：

ERROR ReferenceError: google is not defined
    at GoogleMapNativeComponent.ngOnInit (google-map-native.component.ts:16)
    at checkAndUpdateDirectiveInline (core.js:12095)
    at checkAndUpdateNodeInline (core.js:13598)
    at checkAndUpdateNode (core.js:13541)
    at debugCheckAndUpdateNode (core.js:14413)
    at debugCheckDirectivesFn (core.js:14354)
    at Object.eval [as updateDirectives] (GoogleMapNativeComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
    at checkAndUpdateView (core.js:13508)
    at callViewAction (core.js:13858)

如何正确地将库包含到我的组件和api密钥中？

Answer 1

我知道我来晚了，但对于任何遇到此问题的人：

好吧，您应该做两次检查：

您是否从任何地方导入了googlemaps js脚本？它可以在您的index.html文件中，也可以在angular cli json中
您是否在tsconfig中将googlemaps添加到“类型”数组中？

第二，您的代码有问题。您只能在ngAfterViewInit方法上/之后使用ViewChild变量（不要忘记将其添加到组件的实现列表中），而不能在ngOnInit上使用。因此，您无法在ngOnInit方法上创建地图，它将无法正常工作。

从今天开始，您还应该安装“ @ types / googlemaps”，而不是@ types / google-maps。此外，当仅针对devDependencies（--save-dev）安装它时，它对我有用。

如何在angular 2+组件

1 个答案: