將google maps api加載到angular2的最佳方式是什麼？

我玩過angular2 maps，但最終我想直接使用google maps api。將google maps api加載到angular2的最佳方式是什麼？

什麼是加載到角2的最好/正確的方法？目前我正在通過腳本標記加載它，插入到index.html文件中，就像這樣。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Ourlatitude</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
</head> 
<body> 
    <script 
    src="https://maps.googleapis.com/maps/api/js?key=my_api_key"> 
    </script> 
    <app-root>Loading...</app-root> 
</body> 
</html>

然後，我創建在將保存在地圖的組件的ngAfterViewInit（）內鉤的部件的圖。

ngAfterViewInit() { 
    this.map = new google.maps.Map(this.mymap.nativeElement, {zoom: 4, center: {lat: -25.363, lng: 131.044} }); 
}

這似乎是工作，但添加腳本標籤似乎不喜歡做的事情。我嘗試將腳本添加到angular-cli.json腳本：[]數組，但似乎不起作用（撥打new google.maps.Map()失敗，谷歌未定義）。

順便說一下，我通過npm install --save @types/google-maps安裝了類型，他們似乎被認可。

來源

2017-03-19 nPn

嘗試使用Getting started，這個文件讓我們從頭開始，使用angular2-google-maps構建一個Angular 2應用程序。這是更加清潔和更有效的方式來加載谷歌地圖API，因爲它是使用angular2集成。

要熟悉angular2和angular2-google-maps並且不想使用NPM設置完整項目，可以使用以下Plunker。它具有與Angular2，Typescript以及當然angular2-google-maps一起玩的所有依賴：Plunkr link。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script src="https://unpkg.com/[email protected]/dist/zone.js"></script> 
    <script src="https://unpkg.com/[email protected]/Reflect.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/system.js"></script> 
    <script src="https://unpkg.com/[email protected]/lib/typescript.js"></script> 
    <script src="systemjs.config.js"></script> 

    <script> 
    System.import('app') 
     .catch(console.error.bind(console)); 
    </script> 
    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 

    </body> 

</html> 


<!-- 
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that 
can be found in the LICENSE file at http://angular.io/license 
-->

來源

2017-03-22 08:50:27

我其實知道如何使用angular2-google-maps。這是我目前使用的，但我有興趣直接加載原始api，特別是異步，並且不添加腳本標記到我的索引。有幾種方法，比如在組件內部的代碼中添加腳本，但是大多數看起來有點冒險，所以我在問什麼纔是加載這個角度友好的api的正確方法。 – nPn

將google maps api加載到angular2的最佳方式是什麼？

回答

相關問題