入门 - 如何使用带有angular-cli的Google maps api

Question

我最近开始使用ng2.所以我使用angular-cli创建了一个项目,然后我意识到我需要一些第三方模块.比如谷歌地图api,lodash,jquery等等.我知道Typescript的基础知识,但是我如何在Angular2应用程序中使用这些模块？此外,我想只使用图书馆,例如谷歌地图api,而不是其他任何人在谷歌地图api上制作的现有ng2模块/组件 - 为了学习.

以前,只有JS我会包含js文件并引用api文档来了解引用和构建我的应用程序的方法.现在使用Angular2,我应该采取哪些步骤来做同样的事情？

从我的研究看起来我首先安装所需的类型脚本文件.所以对于谷歌地图我做了npm install --save @types/google-maps.现在,我是否需要将此模块导入到我的角度应用程序中,方法是将其包含在app.module.ts中？在进口数组？或者它现在全球可用？

一个消息来源提到用npm和我的angular-cli.json安装它,包括脚本数组中对该库的引用.像这样:

"scripts": ['./node_modules/googlemaps/googemaps.min.js'],

在安装google maps api时使用哪种方法？我认为Typescript可能是要走的路,因为Angular应用程序的其余部分将用Typescript编写.

现在在我的app.component.ts中,我想使用我安装的打字稿创建一个简单的地图.我该怎么办？谷歌地图api说要像这样创建一个新的地图实例.

var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          scrollwheel: false,
          zoom: 8
        });

我刚刚安装的Googlemaps打字稿版本怎么做？

Googlemaps的打字稿版本是否具有与原始API相同的方法？流行的JS库的打字稿有一个我可以参考的文档站点吗？

Answer 1

该股东周年大会通过@Steve G.指出项目提供一个良好的起点,但由于某种原因(比如管理自己的请求策略),你可能想使自己的类型的包装.在这里我是如何使用Angular Cli完成的:

第一步 :

npm i --save @types/googlemaps

其次将类型添加到您的tsconfig.app.json:

"types": ["googlemaps"]

最后写下你的打字稿:

//nothing to import here

//Replace this by anything without an ID_KEY
const getScriptSrc = (callbackName) => {
  return `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`;
}

export class GMapService {

  private map: google.maps.Map;
  private geocoder: google.maps.Geocoder;
  private scriptLoadingPromise: Promise<void>;

  constructor() {
        //Loading script
        this.loadScriptLoadingPromise();
        //Loading other components
        this.onReady().then(() => {
          this.geocoder = new google.maps.Geocoder();
        });
  }

  onReady(): Promise<void> {
    return this.scriptLoadingPromise;
  }

  initMap(mapHtmlElement: HTMLElement, options: google.maps.MapOptions): Promise<google.maps.Map> {
    return this.onReady().then(() => {
      return this.map = new google.maps.Map(mapHtmlElement, options);
    });
  }

  private loadScriptLoadingPromise() {
    const script = window.document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.defer = true;
    const callbackName: string = 'UNIQUE_NAME_HERE';
    script.src = getScriptSrc(callbackName);
    this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => {
      (<any>window)[callbackName] = () => { resolve(); };

      script.onerror = (error: Event) => { reject(error); };
    });
    window.document.body.appendChild(script);
  }

  /** Exemple of wrapped to promise API */
  geocode(address: string | google.maps.GeocoderRequest): Promise<google.maps.GeocoderResult[]> {
    return this.onReady().then(() => {
      this.geocoder.geocode(typeof address == "google.maps.GeocoderRequest" ? address: {address: address},
          (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
            if(status == google.maps.GeocoderStatus.OK) {
              return results;
            } else {
              throw new Error(status.toString());
            }
      });
    });
  });

}

因此,您的地图组件将如下所示:

@Component({
  selector: 'app-gmap-wrapper',
  template: '<div #map style="width:400px; height:300px">loading...</div>'
})
export class GMapWrapperComponent implements OnInit {
    @ViewChild('map') mapRef: ElementRef;

    constructor(private gmapService: GMapService) { }

    ngOnInit() {
      this.gmapService.initMap(this.mapRef.nativeElement, {
        center: {lat: 1234.1234, lng: 1234.1234},
        scrollwheel: true,
        zoom: 8
      });
    }
}

如果没有google.maps所有类型的前缀中的命名空间,此代码应该更好.也许有任何建议？