web-dev-qa-db-ja.com

はじめに-angular-cliでGoogleマップAPIを使用する方法

私は最近ng2を使い始めました。そのため、angular-cliを使用してプロジェクトを作成しましたが、サードパーティのモジュールが必要なことに気付きました。 Googleマップapi、lodash、jqueryなど。 TypeScriptの基本を知っていますが、Angular2アプリでこれらのモジュールをどのように使用しますか？また、私はライブラリだけを使用したいと思います。たとえば、Google Maps APIを使用したいのですが、Google Maps APIの上に他の誰かが作成した既存のng2モジュール/コンポーネントは使用しません-学習のため。

以前は、JSだけでjsファイルをインクルードし、APIドキュメントを参照して、アプリを参照およびビルドするメソッドを確認していました。 Angular2では、同じことをするためにどのような手順を踏む必要がありますか？

私の研究から、必要なタイプスクリプトファイルを最初にインストールするように見えます。 Googleマップの場合npm install --save @types/google-maps。ここで、このモジュールをangular appにapp.module.tsに含めることでインポートする必要がありますか？imports配列に含まれていますか？それともグローバルに利用できますか？

1つのソースは、npmを使用して、それを私のAngular-cli.jsonにインストールすることについて言及し、そのライブラリへの参照をスクリプト配列に含めました。そのようです：

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

Google Maps APIのインストールに使用する方法はどれですか？残りのAngularアプリはTypeScriptで記述されるので、TypeScriptが良い方法かもしれません。

次に、私のapp.component.tsで、インストールしたTypeScriptを使用して簡単なマップを作成します。どうすればいいですか？グーグルマップAPIはそのように地図の新しいインスタンスを作成するように言っています。

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

インストールしたばかりのGooglemapsのTypeScriptバージョンでどうすればよいですか？

GoogleマップのTypeScriptバージョンには、元のAPIとすべて同じメソッドがありますか？人気のJSライブラリのタイプスクリプトには、参照できるドキュメントサイトがありますか？

google-mapsangulartypescriptangular-cli
11
MAhsan

@Steve Gが指す agm プロジェクトは良い出発点になりますが、何らかの理由（独自の要求ポリシーの管理など）で、独自の型付きラッパーを作成したい場合があります。ここで私はAngular Cliでそれをどのようにしたか：

最初の一歩 ：

npm i --save @types/googlemaps

次に、tsconfig.app.jsonにタイプを追加します。

"types": ["googlemaps"]

最後にTypeScriptを書きます：

//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がない方がよいはずです。多分何か提案？

17
Karbos 538

また、コンポーネントのAGMにも問題があり、その後nu-mapsを試しましたが、そこにも問題がありました。

だから私はプレーンなgoogle api javascriptを使用し、私はそれがより良いと思います： https://cloud.google.com/maps-platform/?hl=de

  • 簡単な
  • 文書化された
  • プルリクエストをマージしない人には依存していません
  • できます！
0
R.S